Jquery 扩展引导型Typeahead插件

我正在使用引导程序Typeahead和Ajax构建一个特定的“自动完成”

我的代码类似于：

searchInput.typeahead({
    source: function (request, response) {
        $.ajax({
            url: '/Home/AllNamesAutoComplete',
            type: 'post',
            dataType: 'json',
            data: { searchText: searchInput.val() },
            success: function (data) {
                var arr = [];
                $.each(data.AutoCompleteItemViewModel, function () {
                    arr.push(this.Name + " - <span>" + this.Position + "</span>");
                });
                return response(arr);
            }
        })
    },
    items: 6
});

searchInput.typeahead({
来源：功能（请求、响应）{
$.ajax({
url:“/Home/AllNamesAutoComplete”，
键入：“post”，
数据类型：“json”，
数据：{searchText:searchInput.val（）}，
成功：功能（数据）{
var-arr=[]；
$.each（data.AutoCompleteItemViewModel，函数（）{
arr.push（this.Name+“-”+this.Position+”）；
});
返回响应（arr）；
}
})
},
项目：6
});

在推送过程中，我传递了两个不同的值：

this.Name

和

this.Position

一切正常，但如果我键入“

S

”作为第一个字母，它也会呈现

。我想将我的字符串作为HTML推送，但我仍然不知道如何做

还有一件事是，当用户单击自动完成中的项目时，我希望只选择

名称

，而不选择

名称

和

位置

我想把HTML放在Typeahead源的数组中，然后单击，在主输入中只呈现一个特定的值，而不是两者

---

我看了“”一眼，但我无法理解它，因为它使用的是主干。

您可以使用jQuery将字符串转换为HTML：

html = $('<div>hello</div>')[0]

html=$（'hello'）[0]

Typeahead的源函数只需要一个字符串数组。要更改这些字符串的输出，请考虑添加高亮显示函数。highlighter函数将接受一个item参数，并应返回HTML:

searchInput.typeahead({
  source: function(request, response){
  ...
    arr.push({Name:this.Name, Position:this.Position});
  ...
  },
  highlighter: function(item){
    return "<div>"+item.Name+" - <span>"+item.Position+"<span></div>"
  },
  matcher: function(item){
    return item.Name.indexOf(this.query) > -1;
  },
  sorter: function(items){
    return items;
  },
  items:6
});

searchInput.typeahead({
来源：功能（请求、响应）{
...
arr.push（{Name:this.Name，Position:this.Position}）；
...
},
荧光灯：功能（项目）{
返回“+项.名称+”-“+项.位置+”
},
匹配器：功能（项目）{
返回item.Name.indexOf（this.query）>-1；
},
分拣机：功能（项目）{
退货项目；
},
项目：6
});

---

编辑：我做了一些更改，以便源代码使用对象数组而不是字符串调用响应。输出html的格式化应该在highlighter函数中进行。匹配器需要能够找到对象内部的属性，以便与查询进行比较。当typeahead试图在源代码中对字符串进行排序时，也必须重写Sorter以防止出错。

我认为您应该创建自己的“matcher”方法。你可以用这个做你的底座。最初的方法使用了“~”操作符（我不知道），您可以阅读到

searchInput.typeahead({
...
匹配器：功能（项目）{
//也许是一些丑陋的解决方案来删除标记
},
...
});

为在这里绊倒的任何人回答问题的标题。这就是扩展引导插件的方法。（是的，我读了比标题更多的内容）

用法：

var typeahead = new app.YourCustomTypeahead($('selector'), { /* options */ });

---

在示例中，

app.extend

是一个通用的扩展函数，如主干网使用的扩展函数

ie.（下面需要下划线）

---

但是我怎样才能把这个.Name和这个.Position分开呢？我编辑了我的示例来处理对象数组，而不是strings。我们的解决方案是完美的！但是只有一个问题：在

上，

数据值=“…”

返回

[object]

。。。解决了这个问题，它是完美的！我正在使用“选择”和更新程序尝试不同的解决方案，但还没有任何结果。。。您知道如何修复它吗？如果您不介意使用自定义分叉，您可以尝试包含此功能的分叉。我不需要删除

span

。。。我需要添加

span

。。。Cezary Wojtkowski发布的解决方案很好，但是没有在

li

中上传

数据值，所以当我从列表中选择某个内容时，它只呈现
[object]
(function ($, app) {

    var Typeahead = $.fn.typeahead.Constructor;
    Typeahead.extend = app.extend;

    app.YourCustomTypeahead = Typeahead.extend({
        highlighter: function (items) {
            // proof that it's working
            console.log('custom highlighter');
            // to call the parent just do this
            return Typeahead.prototype.highlighter.apply(this, arguments);
        }
    });

}(window.jQuery, window.YourProjectNamespace));

var typeahead = new app.YourCustomTypeahead($('selector'), { /* options */ });

(function (app, $) {

    // Backbone's extend function
    app.extend = function(protoProps, staticProps) {

        var parent = this;
        var child;

        // The constructor function for the new subclass is either defined by you
        // (the "constructor" property in your `extend` definition), or defaulted
        // by us to simply call the parent's constructor.
        if (protoProps && _.has(protoProps, 'constructor')) {
          child = protoProps.constructor;
        } else {
          child = function(){ return parent.apply(this, arguments); };
        }

        // Add static properties to the constructor function, if supplied.
        _.extend(child, parent, staticProps);

        // Set the prototype chain to inherit from `parent`, without calling
        // `parent`'s constructor function.
        var Surrogate = function(){ this.constructor = child; };
        Surrogate.prototype = parent.prototype;
        child.prototype = new Surrogate;

        // Add prototype properties (instance properties) to the subclass,
        // if supplied.
        if (protoProps) _.extend(child.prototype, protoProps);

        // Set a convenience property in case the parent's prototype is needed
        // later.
        child.__super__ = parent.prototype;

        return child;
    };

}(window.YourProjectNamespace, window.jQuery));