BootStrap Typeahead自动补全插件实例代码
发布时间：2020-12-18 00:50:37 所属栏目：安全 来源：网络整理
导读：关键代码如下所示： 这种 typeahead自动补全不是bootstrap常用的typeahead.js。 以下是typeahead.js代码（如果有bootstrap3-typeahead.js更好） ' + match + ' ';});},//------------------------------------------------------------------//// Renders th
|
关键代码如下所示： 这种 typeahead自动补全不是bootstrap常用的typeahead.js。 以下是typeahead.js代码（如果有bootstrap3-typeahead.js更好） ' + match + '';
});
},//------------------------------------------------------------------
//
// Renders the results list
//
render: function (items) {
var that = this;
items = $(items).map(function (i,item) {
i = $(that.options.item).attr('data-value',item[that.options.val]);
i.find('a').html(that.highlighter(item[that.options.display],item));
return i[0];
});
items.first().addClass('active');
this.$menu.html(items);
return this;
},//------------------------------------------------------------------
//
// Item is selected
//
select: function () {
var $selectedItem = this.$menu.find('.active');
this.$element.val($selectedItem.text()).change();
this.options.itemSelected($selectedItem,$selectedItem.attr('data-value'),$selectedItem.text());
return this.hide();
},//------------------------------------------------------------------
//
// Selects the next result
//
next: function (event) {
var active = this.$menu.find('.active').removeClass('active');
var next = active.next();
if (!next.length) {
next = $(this.$menu.find('li')[0]);
}
next.addClass('active');
},//------------------------------------------------------------------
//
// Selects the previous result
//
prev: function (event) {
var active = this.$menu.find('.active').removeClass('active');
var prev = active.prev();
if (!prev.length) {
prev = this.$menu.find('li').last();
}
prev.addClass('active');
},//=============================================================================================================
//
// Events
//
//=============================================================================================================
//------------------------------------------------------------------
//
// Listens for user events
//
listen: function () {
this.$element.on('blur',$.proxy(this.blur,this))
.on('keyup',$.proxy(this.keyup,this));
if (this.eventSupported('keydown')) {
this.$element.on('keydown',$.proxy(this.keypress,this));
} else {
this.$element.on('keypress',this));
}
this.$menu.on('click',$.proxy(this.click,this))
.on('mouseenter','li',$.proxy(this.mouseenter,this));
},//------------------------------------------------------------------
//
// Handles a key being raised up
//
keyup: function (e) {
e.stopPropagation();
e.preventDefault();
switch (e.keyCode) {
case 40:
// down arrow
case 38:
// up arrow
break;
case 9:
// tab
case 13:
// enter
if (!this.shown) {
return;
}
this.select();
break;
case 27:
// escape
this.hide();
break;
default:
this.lookup();
}
},//------------------------------------------------------------------
//
// Handles a key being pressed
//
keypress: function (e) {
e.stopPropagation();
if (!this.shown) {
return;
}
switch (e.keyCode) {
case 9:
// tab
case 13:
// enter
case 27:
// escape
e.preventDefault();
break;
case 38:
// up arrow
e.preventDefault();
this.prev();
break;
case 40:
// down arrow
e.preventDefault();
this.next();
break;
}
},//------------------------------------------------------------------
//
// Handles cursor exiting the textbox
//
blur: function (e) {
var that = this;
e.stopPropagation();
e.preventDefault();
setTimeout(function () {
if (!that.$menu.is(':focus')) {
that.hide();
}
},150)
},//------------------------------------------------------------------
//
// Handles clicking on the results list
//
click: function (e) {
e.stopPropagation();
e.preventDefault();
this.select();
},//------------------------------------------------------------------
//
// Handles the mouse entering the results list
//
mouseenter: function (e) {
this.$menu.find('.active').removeClass('active');
$(e.currentTarget).addClass('active');
}
}
//------------------------------------------------------------------
//
// Plugin definition
//
$.fn.typeahead = function (option) {
return this.each(function () {
var $this = $(this),data = $this.data('typeahead'),options = typeof option === 'object' && option;
if (!data) {
$this.data('typeahead',(data = new Typeahead(this,options)));
}
if (typeof option === 'string') {
data[option]();
}
});
}
//------------------------------------------------------------------
//
// Defaults
//
$.fn.typeahead.defaults = {
source: [],items: 8,menu: '
以上所述是小编给大家介绍的BootStrap Typeahead自动补全插件实例代码 。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |