Всем привет хочу с вами поделиться

Небольшой jQuery-скрипт для реализации автодополнения ников при вводе имени пользоватeеля.

Скрипт отслеживает ввод в поле "#mas_inp1" и после ввода минимум двух символов выполняет AJAX-запрос к странице "/index/15-1".

Полученный HTML разбирается, после чего скрипт ищет подходящие ники внутри элементов ".uTd a".

Возможности


  • - автоматический поиск пользователей во время ввода;
  • - AJAX-загрузка данных без перезагрузки страницы;
  • - задержка 300 мс перед отправкой запроса, чтобы не создавать лишние обращения к серверу;
  • - поиск без учёта регистра;
  • - вывод максимум 10 совпадений;
  • - удаление дубликатов;
  • - выбор ника одним кликом;
  • - автоматическая подстановка выбранного ника в поле;
  • - скрытие списка результатов при клике за его пределами.


Как это работает

Пользователь начинает вводить ник в поле "#mas_inp1".
После ввода двух и более символов скрипт ждёт 300 мс и отправляет AJAX-запрос.

Полученная страница анализируется, и из элементов ".uTd a" выбираются ссылки, текст которых содержит введённое значение.
Найденные варианты отображаются под полем ввода в отдельном контейнере ".nick-results".

При нажатии на найденный вариант его значение автоматически подставляется в поле.

HTML

Для работы скрипта достаточно иметь поле:

Код
<input type="text" id="mas_inp1">


Скрипт самостоятельно создаёт контейнер для результатов:

Код
<div class="nick-results"></div>


Стилизация

Внешний вид выпадающего списка можно настроить с помощью CSS-классов ".nick-results" и ".nick-result".

Таким образом, данный скрипт позволяет быстро добавить на сайт удобный поиск и автодополнение ников пользователей без необходимости вручную реализовывать отдельную форму поиска.

Вот полная версия скрипта для ознаколения.

Код
$(function() {  
  var $input = $('#mas_inp1');  
  // Контейнер для результатов  
  var $results = $('<div class="nick-results"></div>').insertAfter($input);  
  var timer;  
  $input.on('input', function() {  
  var query = $.trim($(this).val());  
  clearTimeout(timer);  
  $results.empty().hide();  
  if (query.length < 2) return;  
  timer = setTimeout(function() {  
  $.ajax({  
  url: '/index/15-1',  
  type: 'GET',  
  success: function(html) {  
  var $page = $('<div>').html(html);  
  var found = [];  
  // Ищем текст, совпадающий с введённым ником  
  $page.find('.uTd a').each(function() {  
  var text = $.trim($(this).text());  
  if (text && text.toLowerCase().indexOf(query.toLowerCase()) !== -1 && $(this).children().length === 0) {  
  if (found.indexOf(text) === -1) {  
  found.push(text);  
  }  
  }  
  });  
  // Вывод результатов  
  if (found.length) {  
  $.each(found.slice(0, 10), function(_, nick) {  
  $('<div class="nick-result"></div>').text(nick).appendTo($results).on('click', function() {  
  $input.val(nick);  
  $results.empty().hide();  
  });  
  });  
  $results.show();  
  }  
  }  
  });  
  }, 300);  
  });  
  // Скрываем результаты при клике вне поля  
  $(document).on('click', function(e) {  
  if (!$(e.target).closest('.input_1, .nick-results').length) {  
  $results.hide();  
  }  
  });  
});