扩展引导，预输入，以便采取的对象，而不是字符串 [英] Extend the bootstrap-typeahead in order to take an object instead of a string
本文介绍了扩展引导，预输入，以便采取的对象，而不是字符串的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我为了拿的不是字符串对象扩展引导，预输入。结果
它的工作原理，但我想知道这是做事情的正确方法。
感谢。
参考：结果
<一href=\"http://twitter.github.com/bootstrap/javascript.html#typeahead\">http://twitter.github.com/bootstrap/javascript.html#typeahead
http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js
_。扩展（$。fn.typeahead.Constructor.prototype，{
渲染：功能（项）{
VAR认为这=; 项目= $（项目）.MAP（函数（一，项目）{
我= $（that.options.item）
.attr（数据的价值，项目[that.options.display]）
.attr（数据ID，item.id）;
。i.find（'A'）HTML（that.highlighter（项目））;
回到我[0];
}）; items.first（）addClass（激活）。
这$ menu.html（项目）;
返回此;
}，
选择：功能（）{
VAR VAL =这一点。$ menu.find（'主动'）。ATTR（数据值），
。ID = $这个menu.find（有效。）ATTR（数据ID）。
这一点。$元
.VAL（this.updater（VAL，ID））
。更改（）;
返回this.hide（）
}
}）;返回功能（元素，期权）{
VAR =的getSource功能（）{
返回{
ID：2，
FULL_NAME：LAST_NAMEFIRST_NAME您好
};
}; element.typeahead（{
的minLength：3，
来源：的getSource，
显示：FULL_NAME'，
分拣机：功能（项）{ VAR beginswith = []
= CASESENSITIVE []，
CASEINSENSITIVE = []，
项目，
itemDisplayed; 而（项目= items.shift（））{
itemDisplayed =项目[this.options.display]
如果（！itemDisplayed.toLowerCase（）。的indexOf（this.query.toLowerCase（）））{
beginswith.push（项目）;
}否则如果（〜itemDisplayed.indexOf（this.query））{
caseSensitive.push（项目）;
}其他{
caseInsensitive.push（项目）;
}
} 返回beginswith.concat（CASESENSITIVE，CASEINSENSITIVE）;
}，
荧光笔：函数（项目）{
VAR的查询= this.query.replace（/[\\-\\[\\]{}()*+?.,\\\\\\^$ |＃\\ S] /克，'\\\\ $＆放大器;'）; 返回项目[this.options.display] .replace（新的RegExp（'（'+查询+'），IG），功能（$ 1，比赛）{
回归'＆LT;强＆GT;' +匹配+'＆LT; / STRONG＆GT;';
}）;
}，
匹配：函数（项目）{
VAR值=项目[this.options.display] 返回{
值：〜value.toLowerCase（）的indexOf（this.query.toLowerCase（）），
ID：item.id
};
}，
更新：函数（项目，用户id）{
options.hiddenInputElement.val（用户ID）;
归还物品;
}
}）;
};
解决方案
我建议不写原型（这将影响到所有的地方，你可以使用autocompleter，不仅下面的函数）。结果
这code应该工作：
VAR =的getSource功能（）{ VAR用户=新Backbone.Collection（[
{
FIRST_NAME：普里莫'，
姓氏：'Ultimo的，
ID：1
}，
{
FIRST_NAME：altro_primo'，
姓氏：altro_ultimo'，
ID：2
}
]）。楷模; 返回_.map（用户，功能（用户）{
返回{
ID：user.get（ID），
FULL_NAME：user.get（'FIRST_NAME'）+''+ user.get（'姓氏'），
//这些功能允许引导typehead使用的地方这个项目它期待一个字符串
的toString：功能（）{
返回JSON.stringify（本）;
}，
与toLowerCase：功能（）{
返回this.full_name.toLowerCase（）;
}，
的indexOf：函数（字符串）{
返回String.prototype.indexOf.apply（this.full_name，参数）;
}，
替换：函数（字符串）{
返回String.prototype.replace.apply（this.full_name，参数）;
}
};
}）;
};$（'。FULL_NAME'）。预输入（{
的minLength：3，
来源：的getSource（）
显示：FULL_NAME'，
更新：功能（itemString）{
VAR项目= JSON.parse（itemString）;
$（'身份证'）VAL（item.id）。
返回item.full_name;
}
}）;
演示： http://jsfiddle.net/hyxMh/48/
I extended the bootstrap-typeahead in order to take an object instead of a string.
It works but I would like to know this is the right way to do the things.
Thanks.
Reference:
http://twitter.github.com/bootstrap/javascript.html#typeahead
http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js
_.extend($.fn.typeahead.Constructor.prototype, {
render: function (items) {
var that = this;
items = $(items).map(function (i, item) {
i = $(that.options.item)
.attr('data-value', item[that.options.display])
.attr('data-id', item.id);
i.find('a').html(that.highlighter(item));
return i[0];
});
items.first().addClass('active');
this.$menu.html(items);
return this;
},
select: function () {
var val = this.$menu.find('.active').attr('data-value'),
id = this.$menu.find('.active').attr('data-id');
this.$element
.val(this.updater(val, id))
.change();
return this.hide()
}
});
return function (element, options) {
var getSource = function () {
return {
id: 2,
full_name: 'first_name last_name'
};
};
element.typeahead({
minLength: 3,
source: getSource,
display: 'full_name',
sorter: function (items) {
var beginswith = [],
caseSensitive = [],
caseInsensitive = [],
item,
itemDisplayed;
while (item = items.shift()) {
itemDisplayed = item[this.options.display];
if (!itemDisplayed.toLowerCase().indexOf(this.query.toLowerCase())) {
beginswith.push(item);
} else if (~itemDisplayed.indexOf(this.query)) {
caseSensitive.push(item);
} else {
caseInsensitive.push(item);
}
}
return beginswith.concat(caseSensitive, caseInsensitive);
},
highlighter: function (item) {
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
return item[this.options.display].replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>';
});
},
matcher: function (item) {
var value = item[this.options.display];
return {
value: ~value.toLowerCase().indexOf(this.query.toLowerCase()),
id: item.id
};
},
updater: function (item, userId) {
options.hiddenInputElement.val(userId);
return item;
}
});
};
解决方案
I recommend to not rewrite the prototype (which would impact all places where you could use the autocompleter, not only the following function).
This code should work:
var getSource = function () {
var users = new Backbone.Collection([
{
first_name: 'primo',
last_name: 'ultimo',
id: 1
},
{
first_name: 'altro_primo',
last_name: 'altro_ultimo',
id: 2
}
]).models;
return _.map(users, function (user) {
return {
id: user.get('id'),
full_name: user.get('first_name') + ' ' + user.get('last_name'),
// these functions allows Bootstrap typehead to use this item in places where it was expecting a string
toString: function () {
return JSON.stringify(this);
},
toLowerCase: function () {
return this.full_name.toLowerCase();
},
indexOf: function (string) {
return String.prototype.indexOf.apply(this.full_name, arguments);
},
replace: function (string) {
return String.prototype.replace.apply(this.full_name, arguments);
}
};
});
};
$('.full_name').typeahead({
minLength: 3,
source: getSource(),
display: 'full_name',
updater: function (itemString) {
var item = JSON.parse(itemString);
$('.id').val(item.id);
return item.full_name;
}
});
demo: http://jsfiddle.net/hyxMh/48/
这篇关于扩展引导，预输入，以便采取的对象，而不是字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
