Добавить автозаполнение поиска в существующий выпадающий список в jQuery

Question

У меня есть выпадающий список, где список символов заполнены. Мне нужно добавить автозаполнение поиска, где пользователь может искать через выпадающий список. Сразу же, когда пользователь начнет печатать, нужно показать div с указанным текстом. Это JS Я использую для выпадающего списка. Любая идея, как я могу включить автозаполнение поиска по существующему коду.

JS

$(document).ready(function () {
    $("#watchList").click(function () {
        $("#watchList_Popup").removeClass('animate');
        $("#watchList_Popup").show();
        $("#add_Instrument_Popup").hide();
    });
    $("#watchList_Popup_Close").click(function () {
        $("#watchList_Popup").addClass('animate');
        setTimeout(() => {
            $("#watchList_Popup").hide();
        }, 150);
    });

    $("#add_Instrument").click(function () {
        $("#add_Instrument_Popup").removeClass('animate');
        $("#add_Instrument_Popup").show();
        $("#watchList_Popup").hide();
    });
    $("#add_Instrument_close").click(function () {
        $("#add_Instrument_Popup").addClass('animate');
        setTimeout(() => {
            $("#add_Instrument_Popup").hide();
        }, 150);
    });

})

HTML

<div class="relative">
        <div class="block border px-2 text-sm flex justify-between items-center h-base border-dark-700 rounded-sm w-lg max-w-full my-1">
            <div class="flex">
                <i class="fa fa-search mr-2 text-sm"></i>
                <p class="font-light italic text-sm leading-none">"Add Instrument</p>
            </div>
            <img class="ml-4 text-dark-700 cursor-pointer" id="add_Instrument" src="images/svg/arrow-down.svg">
        </div>
        <div id="add_Instrument_Popup" style="width: 300px; height: 332px;" class="absolute top-sm left-0 border border-dark-700 bg-black hidden transform_scale">
            <div class="p-1 text-center text-sm">
                Select Instrument
                <span class="block absolute top-0 right-0 m-2 pt-sm">
                    <img class="h-10 cursor-pointer" id="add_Instrument_close" src="images/svg/close.svg">
                </span>
            </div>
            <div class="overflow-auto" style="max-height: 91%">
                <div class="text-sm">
                    <div class="flex border-t border-dark-600 px-1 get-id" data-id="sid-7">
                        <div class="flex p-1 items-center flex-1" style="width: 180px;">
                            <img src="images/brick.png">
                            <span class="ml-1 block">EUR/USD</span>
                        </div>
                        <div class="flex w-6 bg-black shadow right">
                            <img class="rotate_-90 m-auto text-dark-700" src="images/svg/arrow-down.svg">
                        </div>
                    </div><div class="flex border-t border-dark-600 px-1 get-id" data-id="sid-8">
                        <div class="flex p-1 items-center flex-1" style="width: 180px;">
                            <img src="images/brick.png">
                            <span class="ml-1 block">EUR/CHF</span>
                        </div>
                        <div class="flex w-6 bg-black shadow right">
                            <img class="rotate_-90 m-auto text-dark-700" src="images/svg/arrow-down.svg">
                        </div>
                    </div><div class="flex border-t border-dark-600 px-1 get-id" data-id="sid-9">
                        <div class="flex p-1 items-center flex-1" style="width: 180px;">
                            <img src="images/brick.png">
                            <span class="ml-1 block">EUR/GBP</span>
                        </div>
                        <div class="flex w-6 bg-black shadow right">
                            <img class="rotate_-90 m-auto text-dark-700" src="images/svg/arrow-down.svg">
                        </div>
                    </div><div class="flex border-t border-dark-600 px-1 get-id" data-id="sid-10">
                        <div class="flex p-1 items-center flex-1" style="width: 180px;">
                            <img src="images/brick.png">
                            <span class="ml-1 block">EUR/DKK</span>
                        </div>
                        <div class="flex w-6 bg-black shadow right">
                            <img class="rotate_-90 m-auto text-dark-700" src="images/svg/arrow-down.svg">
                        </div>
                    </div><div class="flex border-t border-dark-600 px-1 get-id" data-id="sid-11">
                        <div class="flex p-1 items-center flex-1" style="width: 180px;">
                            <img src="images/brick.png">
                            <span class="ml-1 block">EUR/CAD</span>
                        </div>
                        <div class="flex w-6 bg-black shadow right">
                            <img class="rotate_-90 m-auto text-dark-700" src="images/svg/arrow-down.svg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

https://jsfiddle.net/gibb01/wukr9efm/2/

Answer 1

jQuery функция для автозаполнения текстового поля "autocomplete ()" Вы можете следовать коду, как указано в: https://jsfiddle.net/heyitsvajid/fojr146z/1

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>