Question

所以，我正在尝试提前输入并运行。我将源代码和jquery添加到我的项目中，并从以下内容开始：

var countries = ["a list of countries","USA","Germany","Austria", "others"];

$('.typeahead').typeahead({
    source: countries
});

由于此功能有效，所以我知道预输入本身也适用。

但是，当我在网站上使用该示例时，我无法使用服务器端json。

我正在使用的代码：

      $("input.typeahead").typeahead({
           onSelect: function(item) {
               console.log(item);
           },
           ajax: {
               url: "/backend/getsearchbox",
               timeout: 500,
               displayField: "label",
               valueField: "value",
               triggerLength: 3,
               method: "get",

               preDispatch: function (query) {

                   return {
                       search: query
                   }
               },
               preProcess: function (data) {

                   if (data.success === false) {
                       // Hide the list, there was some error
                       return false;
                   }
                   // We good!
                   return data.mylist;
               }
           }
       });

使用“网络”下的Chrome检查工具时，我在列表中看到了我的请求

Request URL: https://domain.tld/backend/getsearchbox?search=aust
Request Method: GET
Status Code: 200

当我使用搜索查询访问链接本身时，将得到以下结果：编辑：我的错误。 JSON错误：

[{"label":"Austria","value":"Austria Value"},{"label":"Australia", "value":"Australia Value"}]

因此，根据我的理解，它应该可以工作。但是，我没有任何结果。我也不会从控制台本身得到错误。

感谢您的任何建议！

Answer 1

我认为您的JSON对象结构在位置1上是错误的

它应该具有相同的JSON对象结构

[{"label":"Austria","value":"Austria Value"},{"Australia":"Australia Value"}]

如果查看数组索引1，则其值不带键。而且由于您在设置中提供的字样，每个字型都有label & value

 displayField: "label",
 valueField: "value",

因此，您需要使用正确的键和值从服务器创建结构，或者可以在通过preProcess函数响应后进行操作。

所以最终正确的响应应该看起来像

[{"label":"Austria","value":"Austria Value"},
{"label":"Australia":"value":"Australia Value"}, 
{"label":"India","value":"India Value}]

Answer 2

尝试使用JSON.parse（）解析JSON字符串，这对我有用

var countries = [];
countries = JSON.parse(data.mylist);

$('.typeahead').typeahead({
   source: countries
});

将Typeahead与json源一起使用

2 个答案: