<div class="dropdown hierarchy-select" id="example-one">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="example-one-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu" aria-labelledby="example-one-button">
        <div class="hs-searchbox">
            <input type="text" class="form-control" autocomplete="off">
        </div>
        <div class="hs-menu-inner">
            <a class="dropdown-item" data-value="" data-level="1" data-default-selected="" href="#">All categories</a>
            <a class="dropdown-item" data-value="1" data-level="1" href="#">Wine</a>
            <a class="dropdown-item" data-value="2" data-level="2" href="#">Color</a>
            <a class="dropdown-item" data-value="3" data-level="3" href="#">Red</a>
            <a class="dropdown-item" data-value="4" data-level="3" href="#">White</a>
            <a class="dropdown-item" data-value="5" data-level="3" href="#">Rose</a>
            <a class="dropdown-item" data-value="6" data-level="2" href="#">Country</a>
            <a class="dropdown-item" data-value="7" data-level="3" href="#">Marokko</a>
            <a class="dropdown-item" data-value="8" data-level="3" href="#">Russia</a>
            <a class="dropdown-item" data-value="9" data-level="2" href="#">Sugar Content</a>
            <a class="dropdown-item" data-value="10" data-level="3" href="#">Semi Sweet</a>
            <a class="dropdown-item" data-value="11" data-level="3" href="#">Brut</a>
            <a class="dropdown-item" data-value="12" data-level="2" href="#">Rating</a>
            <a class="dropdown-item" data-value="13" data-level="2" href="#">Grape Sort</a>
            <a class="dropdown-item" data-value="14" data-level="3" href="#">Riesling</a>
            <a class="dropdown-item" data-value="15" data-level="3" href="#">Aleatico</a>
            <a class="dropdown-item" data-value="16" data-level="3" href="#">Bouchet</a>
            <a class="dropdown-item" data-value="17" data-level="1" href="#">Whiskey</a>
            <a class="dropdown-item" data-value="18" data-level="2" href="#">Country</a>
            <a class="dropdown-item" data-value="19" data-level="3" href="#">Ireland</a>
            <a class="dropdown-item" data-value="20" data-level="3" href="#">Kanada</a>
            <a class="dropdown-item" data-value="21" data-level="3" href="#">Scotland</a>
        </div>
    </div>
    <input class="d-none" name="example_one" readonly="readonly" aria-hidden="true" type="text"/>
</div>

$('#example-one').hierarchySelect({
    width: 'auto'
});

<div class="dropdown hierarchy-select" id="example-two">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="example-two-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu" aria-labelledby="example-two-button">
        <div class="hs-searchbox">
            <input type="text" class="form-control" autocomplete="off">
        </div>
        <div class="hs-menu-inner">
            <a class="dropdown-item" data-value="" data-default-selected="" href="#">All colors</a>
            <a class="dropdown-item" data-value="1" href="#">Red</a>
            <a class="dropdown-item" data-value="2" href="#">Orange</a>
            <a class="dropdown-item" data-value="3" href="#">Yellow</a>
            <a class="dropdown-item" data-value="4" href="#">Green</a>
            <a class="dropdown-item" data-value="5" href="#">Blue</a>
            <a class="dropdown-item" data-value="6" href="#">Purple</a>
            <a class="dropdown-item" data-value="7" href="#">Pink</a>
            <a class="dropdown-item" data-value="8" href="#">Brown</a>
            <a class="dropdown-item" data-value="9" href="#">Black</a>
            <a class="dropdown-item" data-value="10" href="#">Grey</a>
            <a class="dropdown-item" data-value="11" href="#">White</a>
        </div>
    </div>
    <input class="d-none" name="example_two" readonly="readonly" aria-hidden="true" type="text"/>
</div>

$('#example-two').hierarchySelect({
    hierarchy: false,
    width: 'auto',
    resetSearchOnSelection: true
});

<div class="dropdown hierarchy-select" id="example-three">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="example-three-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu" aria-labelledby="example-three-button">
        <div class="hs-searchbox">
            <input type="text" class="form-control" autocomplete="off">
        </div>
        <div class="hs-menu-inner">
            <a class="dropdown-item" data-value="" data-default-selected="" href="#">All colors</a>
            <a class="dropdown-item" data-value="1" href="#">Red</a>
            <a class="dropdown-item" data-value="2" href="#">Orange</a>
            <a class="dropdown-item" data-value="3" href="#">Yellow</a>
            <a class="dropdown-item" data-value="4" href="#">Green</a>
            <a class="dropdown-item" data-value="5" href="#">Blue</a>
            <a class="dropdown-item" data-value="6" href="#">Purple</a>
            <a class="dropdown-item" data-value="7" href="#">Pink</a>
            <a class="dropdown-item" data-value="8" href="#">Brown</a>
            <a class="dropdown-item" data-value="9" href="#">Black</a>
            <a class="dropdown-item" data-value="10" href="#">Grey</a>
            <a class="dropdown-item" data-value="11" href="#">White</a>
        </div>
    </div>
    <input class="d-none" name="example_three" readonly="readonly" aria-hidden="true" type="text" value="4"/>
</div>

$('#example-three').hierarchySelect({
    hierarchy: false,
    search: false,
    width: 200,
    initialValueSet: true,
    onChange: function (value) {
        console.log('[Three] value: "' + value + '"');
    }
});