https://www.madamella.com/theme/standart/js/blok-v4/live-search.js

1let timeout;
2
3function processKeyEvent(eventType, event)
4{
5    if (window.event)
6    {
7        event = window.event;
8    }
9
10
11    let ul = $('#live-search-box ul');
12    let li = $('#live-search-box li');
13    let inp = $('#live-search');
14
15    if (event.keyCode == 38) // Yukarı ok
16    {
17        if (li.hasClass('selectedli') == false)
18        {
19            li.last().addClass('selectedli');
20            inp.val(li.last().children().innerHTML);
21        } else
22        {
23            let t = ul.children('li.selectedli');
24            if (Number.parseInt(t.index()) != 0 && Number.parseInt(t.index()) < ul.children("li").length)
25            {
26                t.prev().addClass('selectedli');
27                t.removeClass('selectedli');
28                inp.val(t.prev().children().text());
29
30            } else
31            {
32                t.removeClass('selectedli');
33                li.last().addClass('selectedli');
34                inp.val(li.last().children().text());
35
36            }
37        }
38    } else if (event.keyCode == 40) // Aşağı ok
39    {
40        if (li.hasClass('selectedli') == false)
41        {
42            li.first().addClass('selectedli');
43            inp.val(li.first().children().text());
44        } else
45        {
46            let t = ul.children('li.selectedli');
47            //console.log(ul.children("li").length)
48            //console.log(t.index())
49            if (Number.parseInt(t.index()) + 1 < ul.children("li").length)
50            {
51                t.next().addClass('selectedli');
52                t.removeClass('selectedli');
53                inp.val(t.next().children().text());
54            } else
55            {
56                t.removeClass('selectedli');
57                li.first().addClass('selectedli');
58                inp.val(li.first().children().text());
59            }
60        }
61    } else if (event.keyCode == 37 || event.keyCode == 39) // Sağ ve sol ok
62    {
63    } else if (event.keyCode == 27)
64    {
65        //ESC
66        document.getElementById("live-search-box").style.display = "none";
67    } else if (event.keyCode == 13) {
68        if (typeof $(".selectedli").find("a").attr("href") != "undefined") {
69            window.location = $(".selectedli").find("a").attr("href");
70        }
71    } else
72        showResult();
73
74}
75
76function processKeyUp(event)
77{
78    processKeyEvent("onkeyup", event);
79}
80
81function showResult()
82{
83    // 300 milisaniye bekle ve ara
84    if (timeout)
85    {
86        clearTimeout(timeout);
87        timeout = null;
88    }
89    timeout = setTimeout(function () {
90        showResultNow()
91    }, 300);
92}
93function showResultNow()
94{
95    let boxi = document.getElementById("live-search");
96    let boxr = document.getElementById("live-search-box");
97
98    // Explorer 8 ve aşağısı window.getComputedStyle()
99    // fonksiyonunu desteklemiyor
100
101    /*
102     if ($.browser && $.browser.msie && 9 > Number.parseInt($.browser.version, 10))
103     {
104     var boxi_style = boxi.currentStyle;
105     }
106     else
107     {
108     var boxi_style = window.getComputedStyle(boxi, null);
109     }
110     */
111
112    let boxi_style = window.getComputedStyle(boxi, null);
113    let boxi_offs = $('#live-search').offset();
114    let isPost = $('#live-search').attr('data-post') || '0';
115
116    let searchWord = boxi.value.replaceAll(/^\//g, '');
117    if (searchWord.length === 0) {
118        document.getElementById("live-search-box").innerHTML = "";
119        return;
120    }
121
122    if (window.XMLHttpRequest)
123    {	// code for IE7+, Firefox, Chrome, Opera, Safari
124        xmlhttp = new XMLHttpRequest();
125    } else
126    {	// code for IE6, IE5
127        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
128    }
129
130    xmlhttp.onreadystatechange = function ()
131    {
132        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
133        {
134            document.getElementById("live-search-box").innerHTML = xmlhttp.responseText;
135            document.getElementById("live-search-box").style.display = "block";
136        }
137    };
138    if (1 === 1 || '1' === isPost) {
139        xmlhttp.open("POST", "/srv/service/product/search/", true);
140        let formData = new FormData();
141        formData.append("searchWord", searchWord);
142        xmlhttp.send(formData);
143    } else {
144        xmlhttp.open("GET", "/srv/service/product/search/" + encodeURIComponent(searchWord));
145        xmlhttp.send();
146    }
147}
148
149$(document).ready(function () {
150
151    document.getElementById("live-search").onkeyup = processKeyUp;
152
153    $("#live-search").on("blur", function (e) {
154        if ($("#live-search").val() == '') {
155            setTimeout(function () {
156                document.getElementById("live-search-box").style.display = "none";
157            }, 500)
158        }
159
160    });

161
162    $(document).click(function (e) {
163        if (!$(e.target).parents('#FormAra').length) {
164            $("#live-search").val('');
165            $("#live-search-box").hide();
166        }
167    });
168
169});
170
171