Question

我无法使用JSON Web服务实现Twitter Bootstrap Typeahead功能。

我查看了本网站上的所有示例，找不到任何可行的方法。我知道我的JSON Web服务有效;我可以在浏览器中输入地址，它返回我期望的JSON，MIME类型设置为“application / 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" />

有谁可以解释为什么这不起作用？

Answer 1

根据上一条评论（“网络服务未被访问”） - 您是否尝试过更正常/文档化的方法？

$('#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不是nessecary，但是当你想加载一个完整的JSON并注入它的一部分作为typeahead的来源时很有用

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

Answer 2

从typeahead文档中我可以看到，参数对象中的源键无效。

我认为看起来应该更像这样：

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

http://jsfiddle.net/qVjsu/

Answer 3

最好在使用异步源时省略return，因为process（）将被触发两次

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

使用JSON REST的Twitter Bootstrap Typeahead

3 个答案: