bootstrap - typeahead自动补全插件
$('#Sale').typeahead({
ajax: {
url: '@Url.Action("../Contract/GetSale")',
//timeout: 300,
method: 'post',
triggerLength: ,
loadingClass: null,
preProcess: function (result) {
return result;
}
},
display: "Value",
val: "ID",
items: ,
itemSelected: function (item, val, text) {
$("#SalesID").val(val);
}
});
这种 typeahead自动补全不是bootstrap常用的typeahead.js。 以下是typeahead.js代码(如果有bootstrap3-typeahead.js更好)
// ----------------------------------------------------------------------------
//
// bootstrap-typeahead.js
//
// Twitter Bootstrap Typeahead Plugin
// v1.2.2
// https://github.com/tcrosen/twitter-bootstrap-typeahead
//
//
// Author
// ----------
// Terry Rosen
// tcrosen@gmail.com | @rerrify | github.com/tcrosen/
//
//
// Description
// ----------
// Custom implementation of Twitter's Bootstrap Typeahead Plugin
// http://twitter.github.com/bootstrap/javascript.html#typeahead
//
//
// Requirements
// ----------
// jQuery 1.7+
// Twitter Bootstrap 2.0+
//
// ---------------------------------------------------------------------------- !
function ($) { "use strict"; //------------------------------------------------------------------
//
// Constructor
//
var Typeahead = function (element, options) {
this.$element = $(element);
this.options = $.extend(true, {}, $.fn.typeahead.defaults, options);
this.$menu = $(this.options.menu).appendTo('body');
this.shown = false; // Method overrides
this.eventSupported = this.options.eventSupported || this.eventSupported;
this.grepper = this.options.grepper || this.grepper;
this.highlighter = this.options.highlighter || this.highlighter;
this.lookup = this.options.lookup || this.lookup;
this.matcher = this.options.matcher || this.matcher;
this.render = this.options.render || this.render;
this.select = this.options.select || this.select;
this.sorter = this.options.sorter || this.sorter;
this.source = this.options.source || this.source; if (!this.source.length) {
var ajax = this.options.ajax; if (typeof ajax === 'string') {
this.ajax = $.extend({}, $.fn.typeahead.defaults.ajax, { url: ajax });
} else {
this.ajax = $.extend({}, $.fn.typeahead.defaults.ajax, ajax);
} if (!this.ajax.url) {
this.ajax = null;
}
} this.listen();
} Typeahead.prototype = { constructor: Typeahead, //=============================================================================================================
//
// Utils
//
//============================================================================================================= //------------------------------------------------------------------
//
// Check if an event is supported by the browser eg. 'keypress'
// * This was included to handle the "exhaustive deprecation" of jQuery.browser in jQuery 1.8
//
eventSupported: function (eventName) {
var isSupported = (eventName in this.$element); if (!isSupported) {
this.$element.setAttribute(eventName, 'return;');
isSupported = typeof this.$element[eventName] === 'function';
} return isSupported;
}, //=============================================================================================================
//
// AJAX
//
//============================================================================================================= //------------------------------------------------------------------
//
// Handle AJAX source
//
ajaxer: function () {
var that = this,
query = that.$element.val(); if (query === that.query) {
return that;
} // Query changed
that.query = query; // Cancel last timer if set
if (that.ajax.timerId) {
clearTimeout(that.ajax.timerId);
that.ajax.timerId = null;
} if (!query || query.length < that.ajax.triggerLength) {
// Cancel the ajax callback if in progress
if (that.ajax.xhr) {
that.ajax.xhr.abort();
that.ajax.xhr = null;
that.ajaxToggleLoadClass(false);
} return that.shown ? that.hide() : that;
} // Query is good to send, set a timer
that.ajax.timerId = setTimeout(function () {
$.proxy(that.ajaxExecute(query), that)
}, that.ajax.timeout); return that;
}, //------------------------------------------------------------------
//
// Execute an AJAX request
//
ajaxExecute: function (query) {
this.ajaxToggleLoadClass(true); // Cancel last call if already in progress
if (this.ajax.xhr) this.ajax.xhr.abort(); var params = this.ajax.preDispatch ? this.ajax.preDispatch(query) : { query: query };
var jAjax = (this.ajax.method === "post") ? $.post : $.get;
this.ajax.xhr = jAjax(this.ajax.url, params, $.proxy(this.ajaxLookup, this));
this.ajax.timerId = null;
}, //------------------------------------------------------------------
//
// Perform a lookup in the AJAX results
//
ajaxLookup: function (data) {
var items; this.ajaxToggleLoadClass(false); if (!this.ajax.xhr) return; if (this.ajax.preProcess) {
data = this.ajax.preProcess(data);
} // Save for selection retreival
this.ajax.data = data; items = this.grepper(this.ajax.data); if (!items || !items.length) {
return this.shown ? this.hide() : this;
} this.ajax.xhr = null; return this.render(items.slice(, this.options.items)).show();
}, //------------------------------------------------------------------
//
// Toggle the loading class
//
ajaxToggleLoadClass: function (enable) {
if (!this.ajax.loadingClass) return;
this.$element.toggleClass(this.ajax.loadingClass, enable);
}, //=============================================================================================================
//
// Data manipulation
//
//============================================================================================================= //------------------------------------------------------------------
//
// Search source
//
lookup: function (event) {
var that = this,
items; if (that.ajax) {
that.ajaxer();
}
else {
that.query = that.$element.val(); if (!that.query) {
return that.shown ? that.hide() : that;
} items = that.grepper(that.source); if (!items || !items.length) {
return that.shown ? that.hide() : that;
} return that.render(items.slice(, that.options.items)).show();
}
}, //------------------------------------------------------------------
//
// Filters relevent results
//
grepper: function (data) {
var that = this,
items; if (data && data.length && !data[].hasOwnProperty(that.options.display)) {
return null;
} items = $.grep(data, function (item) {
return that.matcher(item[that.options.display], item);
}); return this.sorter(items);
}, //------------------------------------------------------------------
//
// Looks for a match in the source
//
matcher: function (item) {
return ~item.toLowerCase().indexOf(this.query.toLowerCase());
}, //------------------------------------------------------------------
//
// Sorts the results
//
sorter: function (items) {
var that = this,
beginswith = [],
caseSensitive = [],
caseInsensitive = [],
item; while (item = items.shift()) {
if (!item[that.options.display].toLowerCase().indexOf(this.query.toLowerCase())) {
beginswith.push(item);
}
else if (~item[that.options.display].indexOf(this.query)) {
caseSensitive.push(item);
}
else {
caseInsensitive.push(item);
}
} return beginswith.concat(caseSensitive, caseInsensitive);
}, //=============================================================================================================
//
// DOM manipulation
//
//============================================================================================================= //------------------------------------------------------------------
//
// Shows the results list
//
show: function () {
var pos = $.extend({}, this.$element.offset(), {
height: this.$element[].offsetHeight
}); this.$menu.css({
top: pos.top + pos.height,
left: pos.left
}); this.$menu.show();
this.shown = true; return this;
}, //------------------------------------------------------------------
//
// Hides the results list
//
hide: function () {
this.$menu.hide();
this.shown = false;
return this;
}, //------------------------------------------------------------------
//
// Highlights the match(es) within the results
//
highlighter: function (item) {
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($, match) {
return '<strong>' + match + '</strong>';
});
}, //------------------------------------------------------------------
//
// 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[];
}); 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')[]);
} 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', $.proxy(this.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 :
// down arrow
case :
// up arrow
break;
case :
// tab
case :
// enter
if (!this.shown) {
return;
}
this.select();
break;
case :
// 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 :
// tab
case :
// enter
case :
// escape
e.preventDefault();
break;
case :
// up arrow
e.preventDefault();
this.prev();
break;
case :
// 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();
}
}, )
}, //------------------------------------------------------------------
//
// 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: ,
menu: '<ul class="typeahead dropdown-menu"></ul>',
item: '<li><a href="#"></a></li>',
display: 'name',
val: 'id',
itemSelected: function () { },
ajax: {
url: null,
timeout: ,
method: 'post',
triggerLength: ,
loadingClass: null,
displayField: null,
preDispatch: null,
preProcess: null
}
} $.fn.typeahead.Constructor = Typeahead; //------------------------------------------------------------------
//
// DOM-ready call for the Data API (no-JS implementation)
//
// Note: As of Bootstrap v2.0 this feature may be disabled using $('body').off('.data-api')
// More info here: https://github.com/twitter/bootstrap/tree/master/js
//
$(function () {
$('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
var $this = $(this); if ($this.data('typeahead')) {
return;
} e.preventDefault();
$this.typeahead($this.data());
})
}); }(window.jQuery);
bootstrap - typeahead自动补全插件的更多相关文章
- typeahead自动补全插件的limit参数问题
遇到的问题很诡异: 后台返回的数据都正确就是显示不正常(有时多有时少),后来发现是typeahead的问题,在1.11版本之后,limit参数从option选项里改到了setdata选项: limit ...
- VIM自动补全插件 - YouCompleteMe--"大神级vim补全插件"
VIM自动补全插件 - YouCompleteMe 序言 vim 之所以被称为编辑器之神多半归功于其丰富的可DIY的灵活插件功能,( 例如vim下的这款神级般的代码补全插件YouCompleteMe) ...
- Vimer的福音 新时代的Vim C++自动补全插件 clang_complete
使用vim的各位肯定尝试过各种各样的自动补全插件,比如说大名鼎鼎的 OmniCppComplete .这一类的插件都是对 Ctags 生成的符号表进行字符串匹配来获得可能的补全项.他们在编写 C 代码 ...
- 新时代的Vim C++自动补全插件 clang_complete
Vimer的福音 新时代的Vim C++自动补全插件 clang_complete 使用vim的各位肯定尝试过各种各样的自动补全插件,比如说大名鼎鼎的 OmniCppComplete .这一类的插 ...
- 【转】Vim自动补全插件----YouCompleteMe安装与配置
原文网址:http://www.cnblogs.com/zhongcq/p/3630047.html 使用Vim编写程序少不了使用自动补全插件,在Linux下有没有类似VS中的Visual Assis ...
- Vim自动补全插件----YouCompleteMe安装与配置
Vim自动补全插件----YouCompleteMe安装与配置 使用Vim编写程序少不了使用自动补全插件,在Linux下有没有类似VS中的Visual Assist X这么方便快捷的补全插件呢?以前用 ...
- vim python自动补全插件:pydiction
vim python自动补全插件:pydiction 可以实现下面python代码的自动补全: 1.简单python关键词补全 2.python 函数补全带括号 3.python 模块补全 4.pyt ...
- CentOS7 Vim自动补全插件----YouCompleteMe安装与配置
最近刚装了新系统CentOS7,想要把编码环境配置一下,使用Vim编写程序少不了使用自动补全插件,我以前用的是neocomplcache+code_complete+omnicppcomplete.但 ...
- vim中自动补全插件snipmate使用
vim中自动补全插件snipmate使用 1.下载snipMatezip:https://github.com/msanders/snipmate.vim/archive/master.zip 2.解 ...
随机推荐
- webconfig 文件加密处理
前几日正好遇到配置文件加密解密的问题,简单记录下流程. 1.首先运行cmd然后打开Framework.cd C:\Windows\Microsoft.NET\Framework\v4.0.303192 ...
- mysql多实例的配置和管理
原文地址:mysql多实例的配置和管理 作者:飞鸿无痕 多实例mysql的安装和管理 mysql的多实例有两种方式可以实现,两种方式各有利弊.第一种是使用多个配置文件启动不同的进程来实现多实例,这种方 ...
- 【hadoop】——压缩工具比较
文件压缩主要有两个好处,一是减少了存储文件所占空间,另一个就是为数据传输提速.在hadoop大数据的背景下,这两点尤为重要,那么我现在就先来了解下hadoop中的文件压缩. hadoop里支持很多种压 ...
- 未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”或它的某一个依赖项 解决方法
在webconfig中加入这段话就可以了 <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:as ...
- POST和GET区别
1. get是从服务器上获取数据,post是向服务器传送数据.2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过H ...
- 烂泥:CentOS命令学习之tar打包与解压
本文由秀依林枫提供友情赞助,首发于烂泥行天下. tar命令一般是做打包和解压使用,有关tar命令的使用.我们可以通过帮助文档进行查看,如下: tar –help man tar tar有几个比较重要的 ...
- php数组高级小结(一)
<?php /** * php5.4新增数组定义 */ $items1 = [ 'a','b','c' ]; $items2=[ 'name'=>'andy','age'=>52 ] ...
- python json
#-*-coding:utf-8-*- '''编码格式记得统一,不然容易出现中文乱码,推荐用utf-8''' import json ##################json单对象######## ...
- php中的curl使用入门教程和常见用法实例
摘要: [目录] php中的curl使用入门教程和常见用法实例 一.curl的优势 二.curl的简单使用步骤 三.错误处理 四.获取curl请求的具体信息 五.使用curl发送post请求 六.文件 ...
- 新版Microsoft Azure Web管理控制台 - Microsoft Azure New Portal - (2)
前文我们提到在Resource Manager模式中,虚拟机默认不再与云服务对应,也不再有类似xxx.cloudapp.net的二级域名.在Resource Manager模式中,虚拟机的网卡.公共I ...