typeahead.js по умолчанию выбирает первое предложение

Я использую библиотеку angularJS от sifyion для typeahead, которая на самом деле использует typeahead.js, bloodhound.js и jquery. У меня есть typeahead.js v 0.10.2 и jquery 1.10.2. Моя цель - создать функцию поиска, в которой пользователь может выбирать только из предложений. поэтому я реализовал это таким образом, что если результат предложения не выбран, запрос с параметром Null отправляется, иначе предложение отправляется. Я установил свои параметры как

minLength: 1,
hightlight: true,
editable: false

У меня есть три набора данных, например:

var bloodhoundStores = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url:'/url/param',
        filter: function(stores){
            return $.map(stores,function(store){return {name: store.name}})
        }
    }
});

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

bloodhoundStores.clearPrefetchCache(); (on all three datasets)
.
bloodhoundStores.initialize(); (on all three datasets)

затем я настроил его для рендеринга предложений, например:

{
    name: 'Locality',
    displayKey: 'name',
    source: bloodhoundLocality.ttAdapter(), 
    templates:{
        header: '<h4 style="padding-bottom: 2px;"><i class="fa fa-location-arrow"></i>Locality</h4>',
        empty:['<p>','<span>No results found</span>','</p>'].join('\n'),
        suggestion: Handlebars.compile('<p><span class="sentence-case">{{name}}</span></p>')
    }
}

Моя проблема в том, что если пользователь вводит слово для поиска, я хочу, чтобы было выбрано первое предложение, если оно есть. Я искал решение в репозитории github twitter typeahead.js для решения проблем. Я не смог найти способ заставить их работать на меня. Пожалуйста, помогите мне или предложите мне другой способ реализовать это.

заранее спасибо


jquery angularjs typeahead.js twitter-typeahead bloodhound
person Savitoj Cheema    schedule 22.04.2014    source источник
comment
Также у меня есть проблема с тем, что обычно стрелка вправо автоматически завершает поисковый запрос, но если пользователь нажимает клавишу вниз, он показывает следующее предложение с курсором в конце. Клавиша со стрелкой вправо теперь не выполняет автоматическое завершение запроса, пользователю снова приходится нажимать клавишу Tab. Предложите мне обходной путь   -  person Savitoj Cheema    schedule 22.04.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вот мое решение:

У меня есть закрытие, которое инкапсулирует всю логику моей формы поиска, включая источник ввода (и связанный с ним). Это выглядит примерно так:

(function() {
  var $searchBox,
      doSearch,
      firstMatch,
      searchResultHandler,
      typeaheadCallback,
      typeaheadSource;

  typeaheadSource = function(query, cb) {
    typeaheadCallback = cb;
    doSearch(query);
  };

  doSearch = function(term) {
    // Do some stuff here to query.
    // When the results come back, fire off a call to searchResultHandler.
  };

  searchResultHandler = function(response) {
    var data = JSON.parse(response.body); // I'm using sock.js in my app

    firstMatch = data[0].termToFillInSearchBox;

    if (typeaheadCallback) {
      typeaheadCallback(data);
    }
  };

  $searchBox.on("typeahead:closed", function(evt) {
    // Match what is in the search field against some expected pattern.
    // In my case, I'm looking for "Some Value.1234".
    // If the input doesn't match, and I have something in "firstMatch" then
    // substitute the value.
    if (! /\w+\.\d+/.test($searchBox.val()) && firstMatch !== undefined) {
      $searchBox.val(firstMatch);
      firstMatch = undefined;
    }
  });
}());
person James Sumners    schedule 23.05.2014