Не могу заставить typeahead.js работать, никаких результатов не будет

Я пытаюсь заставить typeahead.js работать уже 2 дня, и я отказываюсь верить, что это должно быть так сложно. Пока ни один пример не сработал, и я застрял в выяснении того, что идет не так.

Прежде всего, мой файл typeahead.bundle.js загружается из этого репозитория:

https://github.com/twitter/typeahead.js/tree/master/dist

Мой код выглядит так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Typeahead example</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  </head>
  <body>

    <input id="search"/>

  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <!-- Latest compiled and minified Bootstrap -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <!-- Latest Typeahead.js -->
  <script src="typeahead.bundle.js"></script>

  <script type="text/javascript">
  var colors = ["red", "blue", "green", "yellow", "brown", "black"];

  $(document).ready(function() {

    $('#search').typeahead({source: colors});
  })

  </script>
  </body>
</html>

Пожалуйста, помогите мне разобраться в этом.

РЕДАКТИРОВАТЬ: из ответа Сакира теперь я изменил свой код Javascript, чтобы он соответствовал синтаксису версии 10, но он по-прежнему не отображает никаких предложений:

  <script type="text/javascript">
  var colors = ["red", "blue", "green", "yellow", "brown", "black"];

  $(document).ready(function() {

    $('#search').typeahead({
     highlight: true,
     hint: false
     }, colors);
  });

  </script>

javascript jquery typeahead.js typeahead twitter-typeahead
person martin    schedule 31.07.2015    source источник
comment
@sakir Ошибок нет, раскрывающийся список предложений не отображается.   -  person martin    schedule 31.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я предполагаю, что ваш пример работает только с версией typeahead 0.9.x. С версией 10, кажется, есть заметные изменения. U может взглянуть на здесь для получения дополнительной информации.

Я протестировал ваш пример с typeahead версии 0.9, и он отлично работает. Вот работающий образец.

http://jsfiddle.net/179yevon/

если вы хотите использовать последнюю версию typeahead, вы можете просмотреть примеры здесь

как вы можете видеть из первого примера, параметр источника принимает такую ​​функцию source: substringMatcher(states). Может быть, вы можете изменить свой код в соответствии с этим

обновление с версией 10 вы можете сделать что-то вроде этого.

  var colors = ["red", "blue", "green", "yellow", "brown", "black"];

var colorsource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // `states` is an array of state names defined in "The Basics"
  local: colors
});

$('#search').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'color',
  source: colorsource
});

Вот скрипач

http://jsfiddle.net/qug5qdnp/

* Какая кровь делает то, что готовит источник данных в соответствии с типовым источником. Как упоминалось выше, этот источник получает функцию как параметр, а функция ожидает массив строк. Источник типа впереди принимает только массив строк, и вам необходимо преобразовать его в массив массива, если не планируете использовать кровавость

person sakir    schedule 31.07.2015
comment
Я пробовал использовать синтаксис версии 10, но он все равно не работал, я начинаю задаваться вопросом, не происходит ли что-то странное в моем браузере. Не могли бы вы воссоздать свой пример скрипки на одной HTML-странице, чтобы я мог увидеть, работает ли то, что работает для вас, и для меня? - person martin; 01.08.2015