Twitter Bootstrap Typeahead与JSON REST的结合

Question

Twitter Bootstrap Typeahead与JSON REST的结合

3

我在使用 Twitter Bootstrap Typeahead 功能时遇到了问题，需要与一个JSON Web Service一起实现。

我已经查看了该网站上的所有示例，但找不到任何可行的内容。我知道我的JSON Web Service是有效的；我可以在浏览器中输入地址并返回我期望的带有"MIME type"设置为"application/json"的JSON。

以下是我放置在JavaScript中的代码：

<body>

我的HTML页面：

<script>
    $('#typeahead').typeahead({
        source: function (query, process) {
            return $.getJSON(
                'http://localhost:8732/IngredientsService/search/',
                { query: query },
                function (data) {
                    return process(data);
                });
        }
    });
</script>

我有以下代码作为我的“输入”：

<input type='text' id='typeahead' class='typeahead' data-provide="typeahead" data-items="10" />

有人能解释一下为什么这个不起作用吗？

- David Poxon

你说的“不工作”是什么意思？控制台中是否出现任何错误？网络中是否有任何活动？ - Subir Kumar Sao

你的 JSON 格式是否有效？ - Mayur Borad

您可以在http://jsonlint.com/上验证您的JSON。 - Mayur Borad

抱歉，我的描述不是很有帮助。错误是：什么都没有发生。我在控制台（Firebug）中没有看到任何错误消息。我该如何检查网络上是否有任何活动？ - David Poxon

你的控制台已启用吗？ - Mayur Borad

显示剩余5条评论

3个回答

0

使用异步源时最好省略返回，因为这样会触发两次 process()。

$('#typeahead').typeahead({
    source: function (query, process) {
        $.getJSON('/search/json/'+ query), function (data) {
            return process(data);
        });
    },
    minLength: 1,
    items: 8
});

- Dionysios Arvanitis

0

从类型前瞻（typeahead）文档中可以看出，参数对象中的源键不是有效的。

我认为它应该更像这样：

 $('#typeahead').typeahead({
     remote: 'http://localhost:8732/IngredientsService/search/q=%QUERY' 
 });

http://jsfiddle.net/qVjsu/

- Anthony Truskinger

源是一个选项。我尝试使用上述选项，但没有成功。 :( - David Poxon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidkonrad · Accepted Answer

根据最后一条评论（“无法访问web服务”）-您是否尝试过更常规/文档化的方法？请注意保留HTML标记。

$('#typeahead').typeahead({
  source: function (query, process) {
     return $.get('http://localhost:8732/IngredientsService/search/', { query: query }, function (data) {
       return process(data.options); //if JSON is [ "options" : { ...} 
     });
  }
});

$.getJSON并非必需，但在您想要加载整个JSON并将其部分注入为typeahead源时非常有用。

$.getJSON("http://localhost:8732/IngredientsService/search/", function(json) {
  $("#typeahead").typeahead({
    source : json.options //again, dont know the structure of the JSON
  });
});