Я разрабатываю решение для автозаполнения с поиском в базе данных на основе ввода событий (onkeyup), которые пользователь вводит в <h:inputText />
.
Проблема в том, что у меня есть два предварительных условия, что приложениедолжен присутствовать, чтобы выполнить поиск на стороне сервера:
- Текст сообщения:> = 3 и <= 6 символов </li>
- Пользователь прекратил печатать на несколько миллисекунд (предотвращение перегрузки сервера с помощьюк большому поиску)
Без элемента 2) довольно просто решить, просто добавив что-то вроде onkeyup="return checkInputs(this.value)
и возвращая false каждый раз, когда длина ввода текста <3 или> 6.
Но для участия в пункте 2) мне кажется, что я должен использовать Javascript setTimeout , в котором в этом случае используется обратный вызов, т. Е. Я не могу использовать какой-либо возврат для удовлетворения события onkeyup измой вводимый текст.
Я боролся с этой проблемой в течение нескольких дней, и у меня нет никаких подсказок, как я могу решить эту проблему, просто потому, что я ограничен моим реальным стеком (JSF 2.1слюбую дополнительную библиотеку, такую как PrimeFaces или OmniFaces и Jquery 1.3)
HTML-код:
<h:inputText id="text" alt="text"
maxlength="6" size="6" title="text"
value="#{managedBean.searchText}"
onkeyup="return checkInputs(this.value)">
<f:ajax listener="#{managedBean.doSearch}" execute="@this"
event="keyup" render="form:searchResult" />
</h:inputText>
Javascript:
function checkInputs(value) {
let cnsAnterior = sessionStorage.getItem('previousValue');
sessionStorage.setItem('previousValue', value);
if((value.length >= 3 && value.length <= 6) && (previousValue != value)){
return true;
}
return false;
}
Некоторыефрагмент, который я нашел на этом сайте , для предотвращения поиска до тех пор, пока пользователь не перестанет печатать:
// Get the input box
var textInput = document.getElementById('test-input');
// Init a timeout variable to be used below
var timeout = null;
// Listen for keystroke events
textInput.onkeyup = function (e) {
// Clear the timeout if it has already been set.
// This will prevent the previous task from executing
// if it has been less than <MILLISECONDS>
clearTimeout(timeout);
// Make a new timeout set to go off in 800ms
timeout = setTimeout(function () {
console.log('Input Value:', textInput.value);
}, 500);
};
Есть ли способ, используя JSF, что я могу присутствовать в этих двух пунктах?Выполнять поиск на сервере, только когда пользователь набрал не менее 3 символов И остановил ввод за несколько миллисекунд?
Заранее спасибо.