【问题标题】：twitter bootstrap typeahead 2.0.4 ajax errortwitter bootstrap typeahead 2.0.4 ajax错误
【发布时间】：2012-06-24 15:03:50
【问题描述】：

如果我使用 2.0.0 版本，我有以下代码肯定会返回正确的数据结果，但由于某种原因，引导程序的 typeahead 插件给了我一个错误。我将其粘贴在代码示例下方：

<input id="test" type="text" />

$('#test').typeahead({
    source: function(typeahead, query) {
        return $.post('/Profile/searchFor', { query: query }, function(data) {                
            return typeahead.process(data);
        });
    }
});

当我运行这个示例时，我得到了一个 jQuery 错误，它显示以下内容：

**
item is undefined
matcher(item=undefined)bootst...head.js (line 104)
<br/>(?)(item=undefined)bootst...head.js (line 91)
<br/>f(a=function(), b=function(), c=false)jquery....min.js (line 2)
<br/>lookup(event=undefined)bootst...head.js (line 90)
<br/>keyup(e=Object { originalEvent=Event keyup, type="keyup", timeStamp=145718131, more...})bootst...head.js (line 198)
<br/>f()jquery....min.js (line 2)
<br/>add(c=Object { originalEvent=Event keyup, type="keyup", timeStamp=145718131, <br/>more...})jquery....min.js (line 3)
<br/>add(a=keyup charCode=0, keyCode=70)jquery....min.js (line 3)
<br/>[Break On This Error]  
<br/>return item.toLowerCase().indexOf(this.query.toLowerCase())**

有什么想法吗？ ...相同的代码在插件的 2.0.0 版本中工作，但无法写入我的淘汰对象模型。

这是 2.0.0 版本的有效输入代码：

var searchFunction = function(typeahead, query) {
        $.ajax({
            url: "/Profile/searchFor?tableName=" + tableName + "&query=" + query + "&extendedData=" + $("#" + extendedData).val(),
            success: function(data) {
                if (data.errorText != null) {
                    toggleLoading("false");
                    showDialog(data.errorText, "Error");
                    return;
                }                
                var result = data.results.split("::");
                typeahead.process(result);
            },
            select: function(event, ui) {
            }
        });
    }

    $("#" + inputBoxId).typeahead({
        source: searchFunction,
        onselect: function(obj) {
        }
    });

【问题讨论】：

请问完整的错误是什么
在原帖中添加了更多信息。
在 Bootstrap 中预先输入 source 必须是一个数组。 twitter.github.com/bootstrap/javascript.html#typeahead
这在2.0.0 中也行不通：github.com/twitter/bootstrap/blob/… 在代码中只有一个地方使用了source，作为$.grep 的参数。
bootstrap typeahead 仅适用于文档甚至源代码所示的简单数组...您必须使用 jQuery UI 自动完成或其他方式。

标签： ajax twitter-bootstrap typeahead

【解决方案1】：

1) Bootstrap typeahead v2.0.2 解决方案

看看this pull request，它看起来像您正在寻找的东西（它是引导程序预输入 v2.0.2 的一个分支）。

我自己使用它，它正在工作:)

2) Bootstrap typeahead v.2.1.0-work in progress 解决方案

你也可以试试this solution。我只是将我的项目更改为使用这个，因为它会在未来的版本中得到支持，而且看起来更干净:)

就我而言：

$("#typeahead").typeahead({
  source: function(query, process) {
    $.post('url_path', { q: query, limit: 4 }, function(data) {
      process(data);
    }); // end of post
  }
});

脚本 url_path 需要 2 个参数 q（字符串）和 limit（结果限制）并返回 json 响应（数组）：

对限制为 4 的查询 i 的响应示例：

["Eminem","Limp Bizkit","Rihanna","Will Smith"]

【讨论】：

【解决方案2】：

对于尝试生成 JSON 数据（不使用 php json_encode）并想知道为什么 bootstrap-typeahead fork by Terry Rosen 无法在 ajax 调用上工作的人

返回的 JSON 数据的格式必须是：-

[{"id":"1","name":"旧车"},{"id":"2","name":"Castro 电车"},{"id":"3 ","name":"绿色老爷车"},{"id":"4","name":"停在古董街的汽车"}]

注意引号

花了一整天的时间试图找出问题所在，我认为将其发布在这里是明智的。也许，我对 JSON 的理解是错误的，但是即使没有引用 id 和 name 字段，firebug 也会将返回的数据显示为有效的 JSON。此外，响应标头应设置为 'application/json'。希望这对某人有所帮助。

【讨论】：

我遇到了这两个问题 - 旧的 JSON 格式和响应标头未设置为 application/json，这个答案救了我。

【解决方案3】：

在 2.0.4 版本中，typeahead 有问题，不接受函数作为源，只接受数组。我升级到 2.1，它按预期工作。

【讨论】：