Как вы решаете проблему «задержки» при поиске в реальном времени?

Question

Привет, я реализую функцию реального поиска (= поиск по мере ввода) в моем веб-приложении. В настоящее время я использую событие keyup для отправки поискового запроса через ajax, например,

$('#SearchField').keyup(function(e) {
        $.post(
           ...
        );
});

но это приводит к некоторой проблеме задержки, в некоторых случаях, когда я выполняю поиск, например, после «проблемы», ответ для «pro» появляется после ответа для «проблемы» и перезаписывает правильный результат поиска путь к большому результату.

Какой будет хороший подход для борьбы с этим поведением?

tia

Answer 1

Вы можете прервать предыдущий запрос

var xhr = null;
$('#SearchField').keyup(function(e) {
  if (xhr !== null) xhr.abort ();
  xhr = $.post(
    ...
  );
});

или установите присвоить идентификатор каждому запросу. когда запрос завершен, если больший идентификатор уже возвращается, игнорируйте ответ. в противном случае сохраните идентификатор.

Answer 2

Я реализовал «живой поиск» один раз и использовал тайм-аут, чтобы начать поиск только после того, как нет ввод был сделан в течение определенного периода времени (полсекунды или около того). Таким образом, поиск будет запускаться только в том случае, если пользователь перестанет печатать, что приведет к снижению задержек результатов и загрузке сервера.

В вашем случае я бы проверил, продолжал ли пользователь печатать и не будет ли выполнять поиск или отображать какой-либо "старый" результат, который приходит с опозданием.

Answer 3

Как вы обнаружили, существует множество хитрых проблем пользовательского интерфейса (пользовательского интерфейса) или пользовательского интерфейса (UX), связанных с созданием удобного поиска в реальном времени.

Я оставляю тяжелую работу по тестированию UI / UX ребятам из Yahoo, которые разработали систему автоматического завершения, которую они используют в своих веб-ресурсах. И лучшая новость заключается в том, что они выпустили его как открытый исходный код: http://developer.yahoo.com/yui/autocomplete/

Не очень хорошая новость заключается в том, что он не использует JQuery, и вы его используете. Вы можете посмотреть на их источник и посмотреть, как они справляются с многочисленными проблемами синхронизации и т. Д. Обратите внимание, что они запускают таймер нажатием клавиши, а не нажатием клавиши вверх.

Есть также хорошая статья о том, как Flickr использует автозаполнение Yaho для реализации поиска на странице: http://code.flickr.com/blog/2009/03/18/building-fast-client-side-searches/

Answer 4

Большинство автозаполнений не заменяют то, что печатает пользователь - они показывают возможные опции в выпадающем списке, который пользователь может затем выбрать.

Вот замечательный пример уже хорошо написанного автозаполнения: http://view.jquery.com/trunk/plugins/autocomplete/demo/

Answer 5

$('#SearchField').keyup(function(e) {
  t = setTimeout(function(){        
    $.post(
           ...
    );
  },1000);
});

С этим кодом ваша функция будет выполнена через 1000 мс. Если keyup запускается снова, он перезаписывает переменную и эффективно отменяет первую функцию. Другими словами, весь пост не произойдет, пока пользователь не перестанет набирать текст в течение 1 секунды.

Answer 6

Хитрость заключается в использовании очередей прерываний и ajax, я написал собственную библиотеку для созданного живого поиска, отфильтровывающую 20 миллионов записей, например, «сливочное масло» (предоставленные оптимизированные таблицы eav помогают справляться со скоростью запросов). есть также плагин jquery ajax manager, который работает хорошо (мне нужно что-то более сложное, поэтому я написал свой собственный). Вы можете установить номер очереди, прервать новый вызов и т. д. Таким образом, ничего не будет запрошено до окончательного ввода пользователем