Методы и примеры использования Bootstrap Typeahead для автозаполнения

Команда «npm typeahead bootstrap» используется для установки пакета Bootstrap Typeahead из npm, который обеспечивает функции опережения ввода/автозаполнения для полей ввода в веб-приложениях.

Вот несколько методов, которые можно использовать с пакетом Bootstrap Typeahead, а также примеры кода:

  1. Инициализация ввода:

    // HTML
    <input type="text" id="myInput">
    // JavaScript
    $('#myInput').typeahead({
     source: ['Apple', 'Banana', 'Cherry', 'Durian']
    });
  2. Удаленный источник данных:

    // JavaScript
    $('#myInput').typeahead({
     source: function(query, process) {
       return $.get('/search', { q: query }, function(data) {
         return process(data.results);
       });
     }
    });
  3. Пользовательские шаблоны:

    // HTML
    <input type="text" id="myInput">
    // JavaScript
    $('#myInput').typeahead({
     source: ['Apple', 'Banana', 'Cherry', 'Durian'],
     displayText: function(item) {
       return item.name + ' (' + item.category + ')';
     },
     templates: {
       suggestion: function(item) {
         return '<div>' + item.name + '<br><small>' + item.category + '</small></div>';
       }
     }
    });
  4. События:

    // JavaScript
    $('#myInput').typeahead({
     source: ['Apple', 'Banana', 'Cherry', 'Durian']
    }).on('typeahead:selected', function(e, item) {
     console.log('Selected item: ', item);
    });
  5. Ограничивающие результаты:

    // JavaScript
    $('#myInput').typeahead({
     source: ['Apple', 'Banana', 'Cherry', 'Durian'],
     limit: 3
    });