Есть исходный вариант поиска, ниже.
function(e, t, n) {
"use strict";
(function(e) {
var t = n(3);
document.addEventListener("modal:afteropen", (function(t) {
"search" === t.detail.modalName && setTimeout((function() {
e.qs(".search-form__field .input__field").focus()
}), 50)
}));
document.addEventListener("modal:beforeopen", (function(t) {
if ("search" === t.detail.modalName) {
var n = e.qs(".header");
! function(e) {
console.log("preloading last queries..."), e.ajax({
url: "/api/",
type: "GET",
data: {
module: "salin.core",
class: "Search",
action: "GetRecent",
nc: Math.random()
},
dataType: "json",
success: function(t) {
var n = e(".search-form__tips");
n.html(""), t.forEach((function(t) {
var i = e('<li><a class="chipbox chipbox--blue" href="#" data-search-tip="Новинки тканей">\n\t\t\t\t\t\t\t<div class="chipbox__bg"></div>\n\t\t\t\t\t\t\t<span class="chipbox__text">Новинки тканей</span></a></li>');
i.find("a").attr("data-search-tip", t.QUERY).find("span.chipbox__text").text(t.QUERY), n.append(i)
}))
},
error: function(e) {
console.warn("AJAX ERROR: ", e)
}
})
}(jQuery), n.classList.add("header--over-modal")
}
})), document.addEventListener("modal:afterclose", (function(t) {
"search" === t.detail.modalName && e.qs(".header").classList.remove("header--over-modal")
})), e.delegate("[data-search-tip]", (function(t, n) {
var i = n.closest(".search-form"),
s = e.qs(".search-form__field .input__field", i);
s.value = n.dataset.searchTip, s.focus(), n.closest("li").remove()
}));
e.each(".search-form__field .input__field", (function(t) {
var n = e.qs(".search-form"),
i = e.qs(".search-form__suggest-list", n);
i && (["keyup", "focus"].forEach((function(e) {
t.addEventListener(e, (function() {
t.value.length > 0 ? (! function(e, t, n) {
console.log("loading..."), e.ajax({
url: "/ajax/fastSearch.php",
type: "GET",
data: {
q: t,
nc: Math.random()
},
dataType: "json",
success: function(t) {
var i = e(n);
i.html(""), t.forEach((function(t) {
var n = e('<li>\n\t\t\t\t\t\t\t<button class="search-form__suggest-btn" type="button" data-search-tip=""></button>\n\t\t\t\t\t\t</li>');
n.find("button").attr("data-search-tip", t.NAME).text(t.NAME).click((function(e) {
document.location.href = t.DETAIL_PAGE_URL
})), i.append(n)
}))
},
error: function(e) {
console.warn("AJAX ERROR: ", e)
}
})
}(jQuery, t.value, i), i.classList.add("search-form__suggest-list--visible")) : i.classList.remove("search-form__suggest-list--visible")
}))
})), t.addEventListener("focusout", (function() {
setTimeout((function() {
i.classList.remove("search-form__suggest-list--visible")
}), 100)
})))
})), e.delegate(".js-open-search", (function(n, i) {
var s = e.qs('[data-modal="search"]'),
a = e.qs(".header"),
o = e.qs(".menu");
window.innerWidth > 990 ? Object(t.c)(s) : (a.classList.toggle("header--search-active"), o.classList.toggle("menu--search-active"))
}))
}).call(this, n(0))
},
Проблема в том, что он срабатывает на все нажатия keyup, точнее обрабатывает каждый запрос этого нажатия. Если написать быстро слово "hello", он сначала сделает поиск по "h", затем "he", после "hel" и т.д. Я хотел поставить задержку на срабатывание keyup, чтобы он начинал делать запрос лишь после небольшой паузы. Т.к. база очень большая, то это выглядит совсем плохо.
Т.к. JS знаю пока плохо, скорее всего у меня ошибка. Код немного обрезал, до состояния где делал изменения. Запрос все равно происходит по каждому нажатию. Достаточно ли здесь будет задержки или нужно делать что-то с циклом each?
function(e, t, n) {
"use strict";
(function(e) {
...
e.each(".search-form__field .input__field", (function(t) {
var n = e.qs(".search-form"),
i = e.qs(".search-form__suggest-list", n);
function delay(callback, ms) {
var timer = 0;
return function() {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
callback.apply(context, args);
}, ms || 0);
};
}
i && $('.input__field').keyup(delay(function(e) {
t.addEventListener(e, (function() {
t.value.length > 0 ? (! function(e, t, n) {
console.log("loading..."), e.ajax({
url: "/ajax/fastSearch.php",
type: "GET",
data: {
q: t,
nc: Math.random()
},
dataType: "json",
success: function(t) {
var i = e(n);
i.html(""), t.forEach((function(t) {
var n = e('<li>\n\t\t\t\t\t\t\t<button class="search-form__suggest-btn" type="button" data-search-tip=""></button>\n\t\t\t\t\t\t</li>');
n.find("button").attr("data-search-tip", t.NAME).text(t.NAME).click((function(e) {
document.location.href = t.DETAIL_PAGE_URL
})), i.append(n)
}))
},
error: function(e) {
console.warn("AJAX ERROR: ", e)
}
})
}(jQuery, t.value, i), i.classList.add("search-form__suggest-list--visible")) : i.classList.remove("search-form__suggest-list--visible")
}))
}), t.addEventListener("focusout", (function() {
setTimeout((function() {
i.classList.remove("search-form__suggest-list--visible")
}), 100)
})), 2000)
...
},
