В современных условиях веб-разработки автозаполнение поиска стало важнейшей функцией, позволяющей улучшить взаимодействие с пользователем и улучшить функциональность поиска. Предоставляя мгновенные подсказки по мере ввода пользователем текста, автозаполнение поиска помогает пользователям быстро находить релевантные результаты. В этой статье мы рассмотрим различные методы реализации автозаполнения поиска в JavaScript, а также приведем примеры кода.

Метод 1: использование элемента списка данных HTML5

<input type="text" list="suggestions">
<datalist id="suggestions">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
  <option value="Grapes">
</datalist>

Метод 2: автозаполнение AJAX с пользовательским интерфейсом jQuery

<input id="searchInput" type="text">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script>
  $(document).ready(function() {
    $("#searchInput").autocomplete({
      source: "/search", // Replace with your server-side endpoint
      minLength: 2 // Minimum characters to trigger autocomplete
    });
  });
</script>

Метод 3. Автозаполнение с помощью Vanilla JavaScript

<input id="searchInput" type="text">
<script>
  const searchInput = document.getElementById('searchInput');
  searchInput.addEventListener('input', function() {
    const inputValue = this.value;
    // Perform AJAX call or fetch to get autocomplete suggestions
    // Update the UI with the received suggestions
  });
</script>

Метод 4. Автозаполнение с использованием сторонних библиотек (например, Typeahead.js)

<input id="searchInput" type="text">
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script>
  const searchInput = document.getElementById('searchInput');
  const suggestions = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '/suggestions' // Replace with your server-side endpoint
  });

  searchInput.addEventListener('input', function() {
    const inputValue = this.value;
    suggestions.search(inputValue, function(suggestedItems) {
      // Update the UI with the received suggestions
    });
  });

  searchInput.typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  }, {
    name: 'suggestions',
    source: suggestions
  });
</script>

Метод 5: автозаполнение с помощью React (с использованием response-autosuggest)

import React, { useState } from 'react';
import Autosuggest from 'react-autosuggest';
const SearchAutocomplete = () => {
  const [value, setValue] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const fetchSuggestions = async (inputValue) => {
    // Perform AJAX call or fetch to get autocomplete suggestions
    // Update the state with the received suggestions
  };
  const onSuggestionsFetchRequested = ({ value }) => {
    fetchSuggestions(value);
  };
  const onSuggestionsClearRequested = () => {
    setSuggestions([]);
  };
  const onSuggestionSelected = (_, { suggestionValue }) => {
    // Handle the selected suggestion
  };
  const renderSuggestion = (suggestion) => {
    // Render each suggestion item
  };
  const inputProps = {
    placeholder: 'Search...',
    value,
    onChange: (_, { newValue }) => setValue(newValue)
  };
  return (
    <Autosuggest
      suggestions={suggestions}
      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
      onSuggestionsClearRequested={onSuggestionsClearRequested}
      onSuggestionSelected={onSuggestionSelected}
      renderSuggestion={renderSuggestion}
      inputProps={inputProps}
    />
  );
};
export default SearchAutocomplete;

Реализация автозаполнения поиска в JavaScript обеспечивает отличный способ улучшить качество поиска для пользователей вашего веб-сайта или приложения. В этой статье мы рассмотрели несколько методов достижения этой цели, в том числе использование списка данных HTML5, пользовательского интерфейса jQuery, стандартного JavaScript, сторонних библиотек, таких как Typeahead.js, и React с автоматическим реагированием. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и начните улучшать функции поиска уже сегодня!