locked
add textbox to dropdownlist as search filter RRS feed

  • 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. 

    Wednesday, October 25, 2017 10:43 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 26, 2017 7:53 AM

All replies

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 26, 2017 7:53 AM
  • Monday, October 30, 2017 3:12 PM