提前输入 - json 结构的问题

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

不幸的是，我无法让 typeahead 为我工作，最终选择了 jQuery ui 的自动完成功能