Question

所以我一直在努力学习Twitter的typeahead.js，我得说，文档还有一些不足之处。我已经尝试了几十种不同的方法，我发现这些方法是为了在这个输入中添加预先输入功能而且我很难过。如果我在下面的代码中遗漏了什么？我没有在控制台中看到任何错误，并且idNums似乎包含适当的数据，但我仍然没有看到正确的叠加层。

我的javascript：

    var idNums = new Bloodhound({
                    datumTokenizer: function (datum) { return Bloodhound.tokenizers.whitespace(datum.value);},
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    prefetch: 'endpoint that returns below json',
                });

idNums.initialize();

    $('#prefetch .typeahead').typeahead({
                        hint: true,
                        highlight: true,
                        minLength: 1
                }, 
                {
                  name: 'BR_NUM',
                  displayKey: 'value',
                  source: idNums.ttAdapter(),
                });

我的HTML：

<div id = "prefetch">
    <label>Value:  </label>
    <input  type = "text" name = "Value" class="typeahead" placeholder="ID Number"/>
</div>

这是我的json文件：

 [{
          "BR_NUM":"20512"
       },
       {  
          "BR_NUM":"22788"
       },
       {  
          "BR_NUM":"22789"
       },
       {  
          "BR_NUM":"22790"
       },
       {  
          "BR_NUM":"22791"
       },
       {  
          "BR_NUM":"22792"
       },
       {  
          "BR_NUM":"22793"
       },
       {  
          "BR_NUM":"22794"
       }
    ]

编辑：所以如果我理解正确，我的代码看起来会没有ajax调用吗？还是我删除的比我应该多？

$('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 2,
        limit: 8
    }, {
name: "main-search",
displayKey: "BR_NUM",
source: 'json url here'

}）;

Answer 1

你是对的，输入文档是一场噩梦。我找到了一个解决方法，对我来说不使用Bloodhound，就像这样：

var autoSuggestCallWorking, autosuggestCallTimeout;
$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 3,
    limit: 8
}, {
    name: "main-search",
    displayKey: "BR_NUM",
    templates: {
        suggestion: Handlebars.compile('{{BR_NUM}}')
    },
    source: function (q, cb) {
        if (autoSuggestCallWorking != null) {
            autoSuggestCallWorking.abort();
        }
        if (autosuggestCallTimeout) {
            clearTimeout(autosuggestCallTimeout);
        }
        autosuggestCallTimeout = setTimeout(function () {
            autoSuggestCallWorking = $.ajax({
                dataType: 'json',
                type: 'get',
                url: '/json_file.json',
                chache: false,
                success: function (data) {
                  // filter your json data with the 'q' parameter and return it as a callback
                  cb(data);
                },
                error: function (err) {
                  ...
                }
            });
        }, 600);

        return true;
    }
});

这是为了查询服务器端数据库所以你可以根据需要摆脱AJAX调用。（和把手）

Answer 2

不幸的是，我无法让这个类型为我工作并最终使用jQuery ui的自动完成

提前输入 - json结构的问题

2 个答案: