Использование Typeahead с системой пользовательского поиска Google

Я пытаюсь заставить Twitter Typeahead+Bloodhound работать с Google CSE.

До сих пор мне удавалось вернуть результаты, но я не могу работать с datumTokenizer.

var results = new Bloodhound({
  datumTokenizer: function(data) {
   return Bloodhound.tokenizers.whitespace(d.value)
  },
  queryTokenizer: Bloodhound.tokenizers.obj.whitespace,
  remote: {
    url: "http://clients1.google.com/complete/search?client=partner&hl=en&sugexp=gsnos%2Cn%3D13&gs_rn=25&gs_ri=partner&partnerid=004914516364918182382%3Ayfqw09r4qvu&types=t&ds=cse&cp=3&gs_id=15&q=%QUERY&callback=showResults&duffCallback=?",
    ajax: $.ajax({type:'GET',dataType:'jsonp',jsonp:'duffCallback'}),
    filter: showResults
  }
});

См. скрипт: http://jsfiddle.net/thugsb/3KAjh/

Вы увидите, что у меня есть результаты, возвращаемые функцией showResults() в виде массива. Однако вызов showResults() из filter:, похоже, ничего не делает, так как удаление этой строки не имеет никакого эффекта. Так что я не совсем уверен, что происходит.

Обратите внимание, что duffCallback — это то, что я придумал, прочитав этот вопрос. Если есть лучший способ сделать эту работу, я весь внимание!


jquery typeahead.js google-custom-search jsonp bloodhound
person thugsb    schedule 30.04.2014    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Во-первых, используемый вами datumTokenizer был не совсем правильным. Вам нужно изменить его на:

datumTokenizer: function(data) {
 return Bloodhound.tokenizers.whitespace(data.value)
}

Обратите внимание, что функция «пробел» теперь ссылается на входной параметр «данные» вместо «d», который вы использовали.

Что касается решения вашей проблемы, посмотрите, как оно работает здесь (например, попробуйте выполнить поиск «легкая атлетика»):

http://jsfiddle.net/Fresh/FYavC/

Основная проблема с вашим кодом была в вашем удаленном URL-адресе (и это тоже меня смутило!). Неправильные параметры строки запроса:

...&callback=showResults&duffCallback=?

"duffCallback=?" не требуется, так как указание "тип данных: 'jsonp'" в объект ajax автоматически добавляет детали обратного вызова (например, "?callback=?"), используемые запросом jsonp. Также «callback=showResults» не требуется, так как метод фильтра неявно вызывается инфраструктурой Bloodhound при успешном выполнении запроса jsonp.

Я согласен с тем, что не очевидно, как следует выполнять удаленные вызовы при использовании Typeahead.js. Пример удаленного вызова, в котором указан объект ajax, и некоторая документация были бы полезны на веб-сайте Typeahead.js!

person Ben Smith    schedule 04.05.2014