BootStrap Typeahead自动补全插件实例代码

关键代码如下所示:

$('#Sale').typeahead({
ajax: {
url: '@Url.Action("../Contract/GetSale")',
//timeout: 300,
method: 'post',
triggerLength: 1,
loadingClass: null,
preProcess: function (result) {
return result;
}
},
display: "Value",
val: "ID",
items: 10,
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(0, 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(0, that.options.items)).show();
}
},
//------------------------------------------------------------------
//
// Filters relevent results
//
grepper: function (data) {
var that = this,
items;
if (data && data.length && !data[0].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[0].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 ($1, 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[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', $.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 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: '<ul class="typeahead dropdown-menu"></ul>',
item: '<li><a href="#"></a></li>',
display: 'name',
val: 'id',
itemSelected: function () { },
ajax: {
url: null,
timeout: 300,
method: 'post',
triggerLength: 3,
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自动补全插件实例代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-08-07

使用Bootstrap typeahead插件实现搜索框自动补全的方法

这就是贴代码的坏处之一:搜索框快被网友玩儿坏了!!!有故意输入空格的,有输入or 1=1的,有alert的,有html乱入的.......而且好像还在玩儿,随他们去吧,只要开心就好. 在项目中,经常会用到输入框的自动补全功能,就像百度.淘宝等搜索框一样:当用户输入首字母.关键词时,后台会迅速将与此相关的条目返回并显示到前台,以便用户选择,提升用户体验.当然本项目的补全功能和这些大厂的技术是没有可比性的,但用于站内搜索也是绰绰有余了. 接触到的自动补全插件主要有两个:autocomplete和ty

Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

UnderScore官网:http://underscorejs.org/ 参考文档:http://www.css88.com/doc/underscore/ 页面代码: @{ ViewBag.Title = "Index"; } <script src="Scripts/bootstrap-typeahead.js"></script> <script src="Scripts/underscore-min.js"

使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法

根据网上查找到的 typeahead使用方法,到最后一步时就出错,数据能从数据库读取出来,但在输入框显示提示时,全都显为:underfined.捉摸了半天都发现不了问题出在哪儿.后来在http://blog.64cm.com/post/2014/08/13/%E4%BD%BF%E7%94%A8bootstrap-typeahead%E6%8F%92%E4%BB%B6 上不经意发现这么一句话:"在当前版本的typeahead中,已经不再支持在source属性中直接调用ajax方法获取数据源了.&q

Bootstrap3使用typeahead插件实现自动补全功能

很酷的一个自动补全插件 http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件,完成自动补全 相关的文档:https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md 数据源: Local:数组 prefectch:json remote等方式 -----------------------------------------------

eclipse自动提示和自动补全功能实现方法

解决代码的自动提示问题: 1.打开 Eclipse -> Window -> Perferences 2.找到Java 下的 Editor 下的 Content Assist , 右边出现的选项中,有一个Auto activation triggers for Java: 会看到只有一个"."存在.表示:只有输入"."之后才会有代码提示 3.先把上图中"."的地方输入几个随便的字符,例如"dsfd",点最下面的&q

asp.net+ajax+sqlserver自动补全功能实现解析

代码下载 说明:数据库连接字符串在web.config文件中,为方便运行使用的是官方的Northwind数据库. 参考(向其作者致敬): ² http://www.loveweb8.com/plus/demo.php?aid=57这个例子是html源码.利用jquery.autocomplete插件利用js实现了自动补全功能.由于我的需要是结合sqlserver数据库表实现自动补全功能.就下来就是将数据库表转为js数组,自然而然就想到了ajax. ² Asp.NetAjax的两种基本开发模式这篇

jQuery实现邮箱下拉列表自动补全功能

记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填写邮箱名字,出现下拉列表,自动补全邮箱 •点击上下按键,选取下拉列表邮箱 •按回车键,选中列表内容,隐藏下拉列表 •鼠标经过,下拉列表选项设置为高亮 •鼠标点击,选中下拉列表选项,隐藏下拉列表 HTML HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签. <ht

easyui-combobox 实现简单的自动补全功能示例

前台:  Html页面 <input id="clsydw" name="clsydw" class="easyui-combobox" data-options="" /> JS //自动补全功能 $("#clsydw").combobox({ valueField:'syr', textField:'syr', panelWidth:200, panelHeight:'auto', onCh

JSP + ajax实现输入框自动补全功能 实例代码

下面是我用ajax实现的输入框自动补全功能,数据库数据很少,大体模仿出了百度首页的提示功能,当然,人家百度的东西不只是这么简单的!先看运行效果: index.jsp(包含主要的js代码) 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath();

基于jquery实现的自动补全功能

本文实例讲述了基于jquery实现的自动补全功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $(function() {     // 自动补全     var maxcount = 0;// 表示他最大的值     var thisCount =0;// 初始化他框的位置     $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; pos

jQuery实现Email邮箱地址自动补全功能代码

本文实例讲述了jQuery实现Email邮箱地址自动补全功能代码.分享给大家供大家参考,具体如下: jQuery Email邮箱地址自动补全代码,输入Email时,会自动加入@符号,在输入框中输入"qq"."Sina"."163"等等可以看到效果:鼠标经过提示Email时,高亮该条Email,鼠标点击Email时,文本框内容替换成该条Email,并删除提示层. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

Android实现登录邮箱的自动补全功能

本文实例为大家分享了Android登录邮箱自动补全功能的实现方法,供大家参考,具体内容如下 效果: 实现原理: 1.继承重写简单控件AutoCompleteTextView 2.编写自定义数据适配器和布局文件,并实现文字变化监听器 3.通过组合方式,实现右侧的删除图标.并根据焦点和文字的变化,动态显示右侧删除图标. 1.通过继承自简单控件AutoCompleteTextView实现帐号自动补全 关键代码: public class AutoComplete extends AutoComplet

Ajax实现搜索引擎自动补全功能

每当我们遇到一些问题时候,我们会百度一下,你是有过我们的问题还没打完就已经出现的经历? 如下图: 天猫: 京东: 这时候的你是否想到如何实现这个功能? 我们的网页明明没有刷新,可是却出现了数据的交互,也就是Ajax的强大之处. 下面以一个例子来实现. 搜索框和搜索按钮,我们希望在搜索框输入部分书名时,能够实现书名的自动补全功能.每当点击了相应的书名,就把内容输入到搜索框. 对应的代码 Search <input type="text" name="name"