Javascript 使用AJAX源代码引导Typeahead：未按预期返回数组

我在引导typeahead正确使用AJAX源代码方面遇到了很多困难

如果我对返回的数组发出警报，它是完全正确的，即使我硬编码它来测试它。它似乎在大多数情况下都不返回任何内容，或者当您键入一个近似匹配项时，它只返回数组中的几个项目

以下是我目前的情况：

$('#companyNameInput').typeahead({
      source: function(query, process){

          $.ajax({
            url: ROOT+'Record/checkCompanyName',
            async: false,
            data: 'q='+query,
            type: 'POST',
            cache: false,
            success: function(data)
            {
              companiesFinal = [];
              map = {};
              companies = $.parseJSON(data);
              $.each(companies, function(i, v){
                map[v.name] = v.id;
                companiesFinal.push(v.name);
              })
            }
          })
          process(companiesFinal);

          // return ['test1', 'test2'] This works fine
          return companiesFinal;
      }

有没有人知道为什么它能正常工作

---

下面是从我的PHP脚本返回的对象数组示例。ID为1和1216的对象显示在typeahead下拉列表中，但其他对象中没有一个显示。我看不出任何模式或线索，说明为什么只有这些会显示，而没有其他

[
   {
      "id": "1265",
      "score": "40",
      "name": "LMV AB"
   },
   {
      "id": "10834",
      "score": "33",
      "name": "Letona"
   },
   {
      "id": "19401",
      "score": "33",
      "name": "Lewmar"
   },
   {
      "id": "7158",
      "score": "33",
      "name": "Lazersan"
   },
   {
      "id": "3364",
      "score": "33",
      "name": "Linpac"
   },
   {
      "id": "1216",
      "score": "33",
      "name": "L H Evans Limted"
   },
   {
      "id": "1",
      "score": "33",
      "name": "LH Evans Ltd"
   },
   {
      "id": "7157",
      "score": "33",
      "name": "Lazersan"
   }
]

最后是

过程（companyesfinal）

中经过的数组：

---

有人有线索吗？我仍然完全不知道为什么这仍然不起作用：(

---

---

“parm”的控制台输出：

更新2 啊，您的服务返回的项目实际上与查询

parm

不匹配。您的typeahead查询是

'parm'

，返回的结果都不匹配。您可以覆盖typeahead插件使用的

匹配器

函数，请参阅。只需将其实现为

return true

，即可匹配所有返回的结果谢谢你的服务

更新1 这是一个更新版本，它将名称映射到一个id，以后可以使用。A

原始答案 您需要使调用异步，并从成功回调中调用

进程

回调，如下所示：

$('#companyNameInput').typeahead({
    source: function (query, process) {
        $.ajax({
            url: ROOT + 'Record/checkCompanyName',
            // async: false, // better go async
            data: 'q=' + query,
            type: 'POST',
            cache: false,
            success: function (data) {
                var companiesFinal = ... // snip
                process(companiesFinal);
            }
        })
    }
});

返回['test1'，'test2']；

有效，因为源函数基本上设置为：

// do ajax stuff, but do nothing with the result
// return the typeahead array, which the typeahead will accept as the result:
return ['test1', 'test2'];

注释

有一行要填充

公司数据

：

var companiesFinal = return $.map(data, function (n, i) { n.name; });

---

您可能想使用

var

声明变量；否则它们将具有全局作用域，这会对您造成不利影响。

没有麻袋来证明否决投票是合理的吗？我进行了更多的实验，发现用鼠标从下拉列表中选择一个项目并不总是有效，从而导致您描述的类似行为。您能检查一下吗如果您使用

向上

、

向下

和

输入

键选择项目会有帮助吗？@Marijn问题是，当下拉列表中应该有很多项目时，下拉列表中只有一个或两个项目，所以用箭头键选择的项目不多：（嗯……您能插入

控制台.log（数据）吗

在成功函数的第一行中（再次）确认返回了正确的数据？@Marijn请参阅控制台输出的编辑。我将过程移动到ajax函数的成功回调中，但仍然得到完全相同的结果：（请参见更新版本的编辑。您的PHP方法的响应类型是否设置为application/Json？是的，我将编辑答案以向您展示构建Json的部分。我在理解javascript代码时遇到一些困难，但我为您创建了我认为符合您需要的，即异步获取typeahead数据并匹配selected项目对应的id。希望有帮助！谢谢你这么做！这么小的东西。这是你的50个爱点：d

[Object, Object, Object, Object, Object, Object]
0: Object
id: "25024"
name: "part"
score: "75"
__proto__: Object
1: Object
id: "15693"
name: "pari"
score: "75"
__proto__: Object
2: Object
id: "28079"
name: "Pato"
score: "50"
__proto__: Object
3: Object
id: "18001"
name: "PASS"
score: "50"
__proto__: Object
4: Object
id: "15095"
name: "PSR"
score: "33"
__proto__: Object
5: Object
id: "22662"
name: "PRP"
score: "33"
__proto__: Object
length: 6
__proto__: Array[0]

var nameIdMap = {};

$('#lookup').typeahead({
    source: function (query, process) {
        return $.ajax({
            dataType: "json",
            url: lookupUrl,
            data: getAjaxRequestData(),
            type: 'POST',
            success: function (json) {
                process(getOptionsFromJson(json));
            }
        });
    },
    minLength: 1,
    updater: function (item) {
        console.log('selected id'+nameIdMap[item]);
        return item;
    }
});

function getOptionsFromJson(json) {
    $.each(json, function (i, v) {
        nameIdMap[v.name] = v.id;
    });

    return $.map(json, function (n, i) {
        return n.name;
    });
}

$('#companyNameInput').typeahead({
    source: function (query, process) {
        $.ajax({
            url: ROOT + 'Record/checkCompanyName',
            // async: false, // better go async
            data: 'q=' + query,
            type: 'POST',
            cache: false,
            success: function (data) {
                var companiesFinal = ... // snip
                process(companiesFinal);
            }
        })
    }
});

// do ajax stuff, but do nothing with the result
// return the typeahead array, which the typeahead will accept as the result:
return ['test1', 'test2'];

var companiesFinal = return $.map(data, function (n, i) { n.name; });