twitter bootstrap typeahead 2.0.4 ajax错误

Question

如果我使用2.0.0版本，我有以下代码肯定会返回正确的数据结果，但由于某些原因，bootstrap的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) {
        }
    });

Answer 1

1）Bootstrap typeahead v2.0.2解决方案

看看this pull request，它看起来像你正在寻找的东西（它是来自bootstrap typeahead v2.0.2的一个分支）。

我自己使用它并且它正在工作：）

2）Bootstrap typeahead v.2.1.0-work in progress solution

您也可以尝试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 （字符串）和限制（结果限制）并返回json响应（数组）：

查询 i 的示例回复，限制 4 ：

  

[“Eminem”，“Limp Bizkit”，“蕾哈娜”，“Will Smith”]

Answer 2

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

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

[{“id”：“1”，“name”：“Old car”}，{“id”：“2”，“name”：“Castro trolley car”}，{“id”：“3 “，”“名称”：“绿色经典汽车”}，{“id”：“4”，“名称”：“停放在古董行中的汽车”}}

请注意引号

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

Answer 3

在版本2.0.4上，typeahead是错误的，不接受函数作为源，只接受数组。我升级到2.1，它按预期工作。