Почему typeahead в Twitter bootstrap здесь не работает?

#javascript #jquery #twitter-bootstrap

#javascript #jquery #twitter-bootstrap

Вопрос:

Я пытаюсь получить typeahead.js работаю в моем проекте. В моем проекте загружен bootstrap (только что скачал исходный код с сайта начальной загрузки). Поиск в источнике не показывает упоминания о typeahead, поэтому я включил автономный js-файл.

Я не получаю никаких ошибок, когда пытаюсь его использовать, но он просто не работает. Простой код:

 <input type="text" class="typeahead" />

var source = ["test1", "test2", "test3", "test4"];

$('.typeahead').typeahead({
    source: source })
  

jsfiddle: ссылка

Что я делаю не так? (обратите внимание, что мой js находится в нижней части jsfiddle)

Ответ №1:

Вы используете другую версию typeahead.js , чем то, как вы ее называете.

Последняя версия typeahead ожидает переменное количество аргументов dataset. Смотрите мою обновленную версию вашей скрипки: http://jsfiddle.net/DTcHh/458 /

 var source = ["test1", "test2", "test3", "test4"];

function mySource(query, callback){
  srcs = [];
  for(var idx in source){
      var src = source[idx];
      if(src.indexOf(query) !== -1){
        srcs.push({value: src});
      }
  }
  console.log(srcs);
  callback(srcs);
}

$(document).ready(function(){
    var t = $(".typeahead");
    t.typeahead({}, {'source': mySource});
});
  

Для каждого набора данных должен быть source атрибут, указывающий на функцию. Эта функция принимает строку запроса и функцию обратного вызова. Ожидается, что вы сделаете то, что вам нужно, со строкой запроса, а затем вызовете функцию обратного вызова со списком объектов, где у каждого объекта есть атрибут value , который соответствует отображаемому значению.

Я думаю, вы должны иметь возможность указать {'local': source} в параметрах, но я не заставил его работать.

В любом случае, если вам нужен старый API, вам придется использовать версию typeahead от Bootstrap 2.

Комментарии:

1. Спасибо за это. Знаете ли вы, почему стиль не соответствует стилю демонстрационной страницы typeahead? Похоже, что отсутствует куча css.

2. Где задокументирован этот синтаксис использования? Я не могу понять, как настроить методы сопоставления / обновления / выделения с помощью этого синтаксиса.