add textbox to dropdownlist as search filter

Question

User2108892867 posted

Hello everyone, I would like to add a textbox as top listitem to my dropdown when the dropdown is expanded. The textbox will function as a search filter on the dropdown list items. The textbox only show up when the dropdown is expanded. I have search online and only found a few examples that actually show the textbox by default and not the dropdown by default. 

Thanks for your help. 

Answer 1

User-707554951 posted

Hi asplearning,

From your description, you could use the plugin of Select2 to achieve your idea.

Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call .select2() on any jQuery selector where you would like to initialize Select2.

You could refer to the code as beolow:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".js-example-disabled-results").select2();
        });
</script>
<div>
            <select class="js-example-disabled-results" name="state" >
                <option value="one">First</option>
                <option value="two">Second</option>
                <option value="three">Third</option>
            </select>
        </div>

Related link:

https://select2.org

Best regards

Cathy

Answer 2

User-37275327 posted

FYI

https://select2.org/getting-started/basic-usage