https://seeyoutravel.com.cy/wp-content/themes/seeyoutravel/assets/js/select-dropdown.js

1$(document).ready(function () {
2
3  function initializeDropdown(dropdown) {
4    var searchInput = dropdown.find(".dropdown-search");
5    var dropdownList = dropdown.find(".dropdown-list");
6    var listItems = dropdownList.find("li:not(.not-found)");
7
8    searchInput.on("input", function () {
9      var filter = $(this).val().toLowerCase();
10      var matchCount = filterResults(listItems, filter);
11      toggleDropdownList(filter, matchCount);
12    });
13
14    searchInput.on("focus", function () {
15      var filter = $(this).val().toLowerCase();
16      var matchCount = filterResults(listItems, filter);
17      toggleDropdownList(filter, matchCount);
18    });
19
20    searchInput.on("blur", function () {
21      setTimeout(() => {
22        var inputText = searchInput.val().toLowerCase();
23        var itemExists = listItems.toArray().some(el => $(el).text().toLowerCase() === inputText);
24
25        if (!itemExists) {
26          searchInput.val("");
27          filterResults(listItems, "");
28          toggleDropdownList("", 0);
29        }
30
31        dropdownList.hide();
32      }, 150);
33    });
34
35    dropdownList.on("mousedown", "li:not(.not-found)", function () {
36      var selectedItem = $(this).text();
37      var selectedItemId = $(this).data("id");
38      searchInput.val(selectedItem);
39      dropdownList.hide();
40      handleItemSelected(selectedItem, selectedItemId);
41    });
42
43    searchInput.on("keydown", function (event) {
44      if (event.key === "Enter") {
45        event.preventDefault();
46        var firstVisibleItem = dropdownList.find("li:not(.not-found):visible").first();
47        if (firstVisibleItem.length) {
48          var selectedItem = firstVisibleItem.text();
49          var selectedItemId = firstVisibleItem.data("id");
50          searchInput.val(selectedItem);
51          dropdownList.hide();
52          handleItemSelected(selectedItem, selectedItemId);
53        }
54      }
55    });
56
57    searchInput.on("keyup", function (event) {
58      if (event.key === "Escape") {
59        searchInput.val("");
60        var matchCount = filterResults(listItems, "");
61        toggleDropdownList("", matchCount);
62      }
63    });
64
65    function filterResults(listItems, filter) {
66      var limit = 10;
67      var matchCount = 0;
68
69      listItems.each(function () {
70        var match = $(this).text().toLowerCase().includes(filter);
71        if (match && matchCount < limit) {
72          $(this).show();
73          matchCount++;
74        } else {
75          $(this).hide();
76        }
77      });
78
79      return matchCount;
80    }
81
82    function toggleDropdownList(filter, matchCount) {
83      var notFoundItem = dropdownList.find(".not-found");
84
85      if (matchCount > 0) {
86        dropdownList.show();
87        notFoundItem.hide();
88      } else if (filter.length > 0) {
89        dropdownList.show();
90        notFoundItem.show();
91      } else {
92        dropdownList.hide();
93      }
94    }
95  }
96
97  function handleItemSelected(item, itemId) {
98    console.log("Item selected:", item, "with ID:", itemId);
99    // You can handle selection logic here
100  }
101
102  initializeDropdown($("#search_vendor"));
103  initializeDropdown($("#search_customer"));
104
105});