gpt4 book ai didi

jquery - 扩展 Bootstrap Typeahead 插件

转载 作者:行者123 更新时间:2023-12-01 08:12:26 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 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
});

在推送中我传递了两个不同的值:this.Namethis.Position .

一切正常,但如果我输入“S ”作为第一个字母,它会呈现 <span>以及。我想将我的字符串作为 HTML 推送,但我仍然不知道该怎么做。

还有一件事是,当用户单击自动完成中的项目时,我希望仅选择 Name而不是NamePosition .

我想将 HTML 放入 Typeahead 源的数组中,然后单击时在主输入中仅呈现一个特定值,而不是两者。

我查看了“Extend the bootstrap-typeahead in order to take an object instead of a string”,但我无法理解它,因为它使用的是 Backbone。

最佳答案

为任何在这里遇到问题的人回答问题的标题。这就是扩展 Bootstrap 插件的方式。 (是的,我已经阅读了比标题更多的内容)

(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 */ });
<小时/>

在示例中,app.extend 是一个通用扩展函数,例如 Backbone 使用的函数。

即。 (下面需要下划线)

(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));

关于jquery - 扩展 Bootstrap Typeahead 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12704877/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com