扩展自 jQuery.ui.autocomplete, 实现无限下拉功能。
使用场景:下拉列表数量巨大,并且可以分多次加载完成。
使用限制:source 需是 Function, 其他情况请使用jQuery.ui.autocomplete。
实现原理:在autocomplete中添加scroll事件,判断列表中最后一个项目是否被显示。
当最后一个项目被显示时,调用 search(最终调用 source) 加载后续数据。
Depends:
jquery.ui.autocomplete.js
/*!
*
* 扩展自 jQuery.ui.autocomplete, 实现无限下拉功能。
*
* 使用场景:下拉列表数量巨大,并且可以分多次加载完成。
*
* 使用限制:source 需是 Function, 其他情况请使用jQuery.ui.autocomplete。
*
* 实现原理:在autocomplete中添加scroll事件,判断列表中最后一个项目是否被显示。
* 当最后一个项目被显示时,调用 search(最终调用 source) 加载后续数据。
*
*
* Depends:
* jquery.ui.autocomplete.js
*/
(function( $, undefined ) {
//输入的值是否发生了变化。
//_searchTimeout中设置为true,//this._on( "scroll") 中设置为 false。
//在__response和_suggest 中被使用。
var termChanged = true;
//用于防止多次调用 search 方法。
var lastEleAppeared = false;
$.widget( "ui.autocompleteEx", jQuery.ui.autocomplete, {
version: "1.10.3",
_create: function() {
this._super( );
this._on( this.menu.element, {
scroll : function(){
var menuElement = this.menu.element;
var lastEle = menuElement.children(":last");
var eleTop = lastEle.offset().top;
var maxTop = menuElement.offset().top + menuElement.height();
var minTop = maxTop - lastEle.height();
if( eleTop > minTop && eleTop < maxTop ){
if( lastEleAppeared !== true){//如最后一个元素被显示,则需加载后续数据。
lastEleAppeared = true;
termChanged = false;
var tmp = this.term;
this.search( this.term );
this.term = tmp;
}
}else{
lastEleAppeared = false;
}
}
});
},
_searchTimeout: function( event ) {
clearTimeout( this.searching );
this.searching = this._delay(function() {
// only search if the value has changed
if ( this.term !== this._value() ) {
this.selectedItem = null;
termChanged = true;//*****
this.search( null, event );
}
}, this.options.delay );
},
_response: function() {
var that = this;
return function( content ) {
that.__response( content );
that.pending--;
if ( !that.pending ) {
that.element.removeClass( "ui-autocomplete-loading" );
}
};
},
__response: function( content ) {
if ( content ) {
content = this._normalize( content );
}
this._trigger( "response", null, { content: content } );
if ( !this.options.disabled && content && content.length && !this.cancelSearch ) {
this._suggest( content );
this._trigger( "open" );
} else {
// use ._close() instead of .close() so we don't cancel future searches
if( termChanged ){//*****
this._close();
}//*****
}
},
_suggest: function( items ) {
//*****
var ul = this.menu.element;
if( termChanged ){
ul.empty();
}
//*****
this._renderMenu( ul, items );
this.isNewMenu = true;
this.menu.refresh();
// size and position menu
ul.show();
this._resizeMenu();
ul.position( $.extend({
of: this.element
}, this.options.position ));
if ( this.options.autoFocus ) {
this.menu.next();
}
},
_move: function( direction, event ) {
if ( !this.menu.element.is( ":visible" ) ) {
this.search( null, event );
return;
}
if ( this.menu.isFirstItem() && /^previous/.test( direction ) ||
this.menu.isLastItem() && /^next/.test( direction ) ) {
//this._value( this.term );
//this.menu.blur();
return;
}
this.menu[ direction ]( event );
}
});
$.extend( $.ui.autocompleteEx, {
escapeRegex: function( value ) {
return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
},
filter: function(array, term) {
var matcher = new RegExp( $.ui.autocompleteEx.escapeRegex(term), "i" );
return $.grep( array, function(value) {
return matcher.test( value.label || value.value || value );
});
}
});
}( jQuery ));
分享到:
相关推荐
style.css几个文件,访问的是数据库,返回的是json数据,json格式已经在index.html中,文本框下来智能选择补全,jquery.ui.js中已经包含了jquery.autocomplete.js源码,不在需要单独引用jquery.autocomplete.js文件
jQuery UI Autocomplete - Default functionality</title> <link rel=stylesheet href=http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css /> <script src=...
主要介绍了jquery UI实现autocomplete在获取焦点时得到显示列表功能,结合实例形式分析了jquery UI实现autocomplete事件响应及显示下拉列表功能操作技巧,需要的朋友可以参考下
下拉列表和自动完成框(Autocomplete)的组合使用
强大的jquery下拉框插件 下拉框展示带列表分页功能,适合下拉框大量数据展示 下拉框带快速查找,可以快速筛选 支持多选 基于jQuery、Bootstrap2、3开发 也可应用于无任何UI框架的原生HTML环境 Autocomplete输入自动...
ul.ui-autocomplete{ z-index: 9999; } 2. 自动完成选择项滚动 当有很多项选择时,自动完成的下拉就会显示很长的列表。为了能够更好地显示那么多的选项,希望能够有一个滚动选择的功能。 ul.ui-autocomplete{ z-...
关于jQuery-ui-1.8中的自动完成控件,其匹配方式是使用正则表达式进行匹配的。
SelectPage.js是一款强大的jquery下拉分页选择插件。SelectPage.js下拉分页选择插件界面简洁,支持下拉,分页,键盘操作等功能。它的特点还有:插件基于jQuery开发,可在Bootstrap2、3环境下使用,亦可在原生无UI...
内容全面、丰富、翔实,不仅由浅入深地讲解了jQuery的所有必备基础知识,还介绍了jQuery UI等扩展知识以及jQuery开发中的技巧与性能优化方面的高级知识。 本书极其注重实战,因为动手实践才是掌握一门新技术的最...
前 言 第1章 jquery开发入门/1 1.1 jquery概述/2 1.1.1 认识jquery /2 1.1.2 jquery基本功能/2 1.1.3 搭建jquery开发环境/3 1.1.4 编写第一个简单的jquery应用/3 1.1.5 jquery程序的代码风格/5 1.2...
SelectPage下拉分页插件是一个简洁而强大的下拉分页选择器;支持远程数据(AJAX)、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件。功能特点:基于jQuery兼容Bootstrap...
jquery-ui-autocomplete 是一个很棒的插件,非常适合小项目列表,尤其是在项目不相似的情况下。 不幸的是,由于它的运作方式,很难扩大它可以处理的项目数量。 每个按键都有可能为列表中的每个项目创建一个 DOM ...
简洁而强大的下拉分页选择器;支持远程数据(AJAX)、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件
功能特点:基于jQuery、Bootstrap2、3开发也可应用于无任何UI框架的原生HTML环境输入框输入关键字快速查找(autocomplete)结果列表分页展示使用键盘快速操作基本功能及分页功能允许使用静态json数据源或ajax动态...
ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...
ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox...
SelectPage是一个基于jQuery及使用Bootstrap环境开发的,下拉列表带输入快速查找及结果分页展示的多功能选择器。SelectPage功能特点基于jQuery、Bootstrap2、3开发 也可应用于无任何UI框架的原生HTML环境 输入框...
SelectPage是一个基于jQuery及使用Bootstrap环境开发的,下拉列表带... 功能特点: 基于jQuery、Bootstrap2、3开发 也可应用于无任何UI框架的原生HTML环境 输入框输入关键字快速查找(autocomplete) 结果列表分页展