twitter typeahead 0.9.3 远程返回 URL 和 json 对象答案

【问题标题】：twitter typeahead 0.9.3 remote return URL and json objecttwitter typeahead 0.9.3 远程返回 URL 和 json 对象
【发布时间】：2013-09-12 17:25:47
【问题描述】：

在引导程序 2 中，我使用以下代码发布了一个 json 对象，

$('#typeahead').typeahead({
        source: function (query, process) {
         var URL = 'http://localhost:8080/autocomplete/search/';
         var query = {"t:jsonStringField": {
                          "name": "model",
                          "value": "fusion"
                         },
                      "t:jsonStringFilter": [
                             {"name": "year","value": "2009"},
                             {"name": "make","value": "ford"}
                         ]
                      }; 

            return $.getJSON(URL,
                { query: JSON.stringify(query)},
                function (data) {
                    return process(data);
                });
        }
    });

现在在 twitter tyeahead 0.9.3 中，他们已经取消了源概念并转移到远程概念，但不幸的是我不知道如何使用它。

$(".typeahead").typeahead({

     remote : {    
      url: 'http://localhost:8080/autocomplete/search/',

      replace: function(uri, query) {

         var query = {"t:jsonStringField": {
                          "name": "model",
                          "value": "fusion"
                         },
                      "t:jsonStringFilter": [
                             {"name": "year","value": "2009"},
                             {"name": "make","value": "ford"}
                         ]
                      }; 

         return uri + JSON.stringify(query);
      },

      filter: function(response) {
           return response.matches;
      }

      return process(resultList);

    }
 }

不幸的是它不起作用，我如何只发布 JSON 对象而不是将其附加到字符串？谢谢。

【问题讨论】：

考虑使用：github.com/bassjobsen/Bootstrap-3-Typeahead
这不能回答我当前的问题，但无论如何我必须询问。这是否像旧的一样工作，并且与 bootstrap 3 一起工作是否良好？
是的，它适用于 Bootstrap 3，您可以使用您的“旧”调用/代码
@BassJobsen 因此，尽管我能够使用 urlEncoded json 对象使 0.9.3 版正常工作，但实际上我切换到了您的 bootstrap-3-typeahead 分支。我对 0.9.3 缺少的功能（例如自动选择第一项和进行程序搜索的能力）感到不满意。感谢图书馆。

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-typeahead

【解决方案1】：

在您的原始代码中，您使用 $.getJSON。这将发送一个请求（并期望 json 作为结果）到：http://localhost:8080/autocomplete/search/?query=%7B%22t%3AjsonStringField%22%3A%7B%22name%22%3A%22model%22%2C%22value%22%3A%22fusion%22%7D%2C%22t%3AjsonStringFilter%22%3A%5B%7B%22name%22%3A%22year%22%2C%22value%22%3A%222009%22%7D%2C%7B%22name%22%3A%22make%22%2C%22value%22%3A%22ford%22%7D%5D%7D

要对 Twitter 的 Typeahead 执行相同操作，调用远程数据的替换函数应该返回一个有效的 url。在您的函数中，url 的 ?query= 部分丢失了。

您必须设置：网址：'http://localhost:8080/autocomplete/search/?query=',

也许你还必须对你的 json 输入进行 urlencode。

注意：您将不需要return process(resultList); 这一行，您必须使用过滤器功能将您的 json 结果转换为有效数据：

构成数据集的各个单元称为基准。这基准的规范形式是具有值属性和令牌属性。

您可以使用模板来设置下拉结果的样式，请参阅：http://twitter.github.io/typeahead.js/examples/

默认情况下，由 typeahead.js 创建的下拉菜单看起来像丑陋的，你会想要设计它以确保它符合主题你的网页。

您将需要来自 https://github.com/jharding/typeahead.js-bootstrap.css 的额外 CSS 来设置 Bootstrap 的默认下拉菜单样式。

【讨论】：