Не удалось заставить Twitter typeahead 0.10 работать с Bloodhound с предварительной выборкой.

Я уже предпринял несколько попыток заставить typeahead.js 0.10 работать и могу заставить его работать только с локальным набором данных.

При использовании предварительной выборки или удаленной опции, даже если следовать странице примеров, это не работает. Либо я форматирую файл json с неправильным синтаксисом и/или ошибаюсь с параметрами ищейки.

Честно говоря, что на самом деле делает «datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }»? что значит пробел...

Что ж, я оставляю здесь свой текущий пример с надеждой, что кто-нибудь поможет мне понять, как его использовать.

Не могли бы вы, если возможно, добавить пример с Bloodhound, используя параметр фильтра, вместе с используемым примером файла json.

JSON-файл

     [
{
  "year": "1961",
  "value": "Test Side Story",
  "tokens": [
    "West",
    "Side",
    "Story"
  ]
},
{
  "year": "1962",
  "value": "Tawrence of Arabia",
  "tokens": [
    "Lawrence",
    "of",
    "Arabia"
  ]
},
{
  "year": "1963",
  "value": "Tom Jones",
  "tokens": [
    "Tom",
    "Jones"
  ]
},
{
  "year": "2012",
  "value": "Argo",
  "tokens": [
    "Argo"
  ]
}

]

Скрипт Typeahead 0.10

       <script>
var films = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'http://localhost/dh/js/films.json'
});

films.initialize();

$('#cenas0').typeahead(null, {
displayKey: 'value',
source: films.ttAdapter(),
templates: {
suggestion: Handlebars.compile(
'<p><strong>{{value}}</strong> – {{year}}</p>'
)
}
});
</script>

HTML-код (с некоторыми объявлениями скрипта)

     <script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script>


<input id="cenas0" class="typeahead" placeholder="cenas0"></input>

json twitter-typeahead
person Caramba    schedule 12.02.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я почти уверен, что, как ни странно, это связано с html-разделами и делегированием классов, если я использую следующий код, который просто добавляет оболочку div вокруг вашего ввода, то, похоже, он работает нормально (используя jquery 1.9.1, typeahead последний комплект)

HTML

    <div class="films">
 <input class="typeahead" name="film" type="text" autocomplete="off" value="">   

    </div>

js код (единственная часть, которую я оставил, это руль)

 var films = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
  prefetch: "js/films.json"


  });

  films.initialize();

  $('.films .typeahead').typeahead(null, {

    displayKey: 'value',
    source: films.ttAdapter()

  })


});

вот jsfiddle, использующий те же данные, что и в локальном хранилище http://jsfiddle.net/qLk8c/

person Jay Rizzi    schedule 14.02.2014
comment
Спасибо, работает нормально. Что делать в случае запроса к базе данных и получения ответа? Это работает так же? заранее спасибо - person Caramba; 17.02.2014
comment
Что делают «токенизатор», «пробел» и руль в функции? - person Vagabond; 23.07.2015