Question

我使用sifyion的angularJS库为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>')
    }
}

我的问题是，如果用户输入搜索词，我想要选择第一个建议（如果有的话）。我已经在twitter typeahead.js github存储库中寻找解决问题的解决方案。我还没有找到让他们为我工作的方法。请帮助我或建议我采用不同的方式来实现它。

提前致谢

Answer 1

这是我的解决方案：

我有一个封装，封装了我的所有搜索表单逻辑，包括typeahead source（和相关的）。它看起来有点像这样：

(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;
    }
  });
}());

typeahead.js默认选择第一个建议

1 个答案: