JQuery easyui里面的自动完成autocomplete插件
Posted 杨建716
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery easyui里面的自动完成autocomplete插件相关的知识,希望对你有一定的参考价值。
默认功能
当您在输入域中输入时,自动完成(Autocomplete)部件提供相应的建议。在本实例中,提供了编程语言的建议选项,您可以输入 "ja" 尝试一下,可以得到 Java 或 javascript。
数据源是一个简单的 JavaScript 数组,使用 source 选项提供给部件。
<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>jQuery UI 自动完成(Autocomplete) - 默认功能</
title
>
<
link
rel
=
"stylesheet"
href
=
"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"
>
<
script
src
=
"//code.jquery.com/jquery-1.9.1.js"
></
script
>
<
script
src
=
"//code.jquery.com/ui/1.10.4/jquery-ui.js"
></
script
>
<
link
rel
=
"stylesheet"
href
=
"http://jqueryui.com/resources/demos/style.css"
>
<
script
>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"php",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</
script
>
</
head
>
<
body
>
<
div
class
=
"ui-widget"
>
<
label
for
=
"tags"
>标签:</
label
>
<
input
id
=
"tags"
>
</
div
>
</
body
>
</
html
>
autocomplete 域使用自定义的 source 选项来匹配带有重音字符的结果项,即使文本域不包含重音字符也会匹配。但是如果您在文本域中键入了重音字符,则不会显示非重音的结果项。包含重音
尝试键入 "Jo",会看到 "John" 和 "Jörn",然后 键入 "Jö",只会看到 "Jörn"。
<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>jQuery UI 自动完成(Autocomplete) - 包含重音</
title
>
<
link
rel
=
"stylesheet"
href
=
"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"
>
<
script
src
=
"//code.jquery.com/jquery-1.9.1.js"
></
script
>
<
script
src
=
"//code.jquery.com/ui/1.10.4/jquery-ui.js"
></
script
>
<
link
rel
=
"stylesheet"
href
=
"http://jqueryui.com/resources/demos/style.css"
>
<
script
>
$(function() {
var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function( term ) {
var ret = "";
for ( var i = 0; i <
term.length
; i++ ) {
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
}
return ret;
};
$( "#developer" ).autocomplete({
source: function( request, response ) {
var
matcher
=
new
RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( names, function( value ) {
value
= value.label || value.value || value;
return matcher.test( value ) || matcher.test( normalize( value ) );
}) );
}
});
});
</script>
</
head
>
<
body
>
<
div
class
=
"ui-widget"
>
<
form
>
<
label
for
=
"developer"
>开发人员:</
label
>
<
input
id
=
"developer"
>
</
form
>
</
div>
</
body
>
</
html
>
分类
分类的搜索结果。尝试键入 "a" 或 "n"。
<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>jQuery UI 自动完成(Autocomplete) - 分类</
title
>
<
link
rel
=
"stylesheet"
href
=
"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"
>
<
script
src
=
"//code.jquery.com/jquery-1.9.1.js"
></
script
>
<
script
src
=
"//code.jquery.com/ui/1.10.4/jquery-ui.js"
></
script
>
<
link
rel
=
"stylesheet"
href
=
"http://jqueryui.com/resources/demos/style.css"
>
<
style
>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</
style
>
<
script
>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<
li
class
=
‘ui-autocomplete-category‘
>" + item.category + "</
li
>" );
currentCategory = item.category;
}
that._renderItemData( ul, item );
});
}
});
</
script
>
<
script
>
$(function() {
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
{ label: "antal", category: "" },
{ label: "annhhx10", category: "Products" },
{ label: "annk K12", category: "Products" },
{ label: "annttop C13", category: "Products" },
{ label: "anders andersson", category: "People" },
{ label: "andreas andersson", category: "People" },
{ label: "andreas johnson", category: "People" }
];
$( "#search" ).catcomplete({
delay: 0,
source: data
});
});
</
script
>
</
head
>
<
body
>
<
label
for
=
"search"
>搜索:</
label
>
<
input
id
=
"search"
>
</
body
>
</
html
>
组合框(Combobox)
一个由 Autocomplete 和 Button 创建的自定义部件。您可以键入一些字符,来获得基于您的输入过滤的结果,或者使用按钮从完整列表中选择。
该输入是从一个已有的 select 元素中读取,传递给带有自定义的 source 选项的 Autocomplete。
这是一个不被支持的不完美的部件。这里纯粹是为了演示 autocomplete 定制功能。如需了解更多有关该部件工作原理的细节,请点击这里查看相关的 jQuery 文章。
<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>jQuery UI 自动完成(Autocomplete) - 组合框(Combobox)</
title
>
<
link
rel
=
"stylesheet"
href
=
"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"
>
<
script
src
=
"//code.jquery.com/jquery-1.9.1.js"
></
script
>
<
script
src
=
"//code.jquery.com/ui/1.10.4/jquery-ui.js"
></
script
>
<
link
rel
=
"stylesheet"
href
=
"http://jqueryui.com/resources/demos/style.css"
>
<
style
>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* 支持: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
}
</
style
>
<
script
>
(function( $ ) {
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<
span
>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children( ":selected" ),
value = selected.val() ? selected.text() : "";
this.input = $( "<
input
>" )
.appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, "_source" )
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$( "<
a
>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.mousedown(function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.click(function() {
input.focus();
// 如果已经可见则关闭
if ( wasOpen ) {
return;
}
// 传递空字符串作为搜索的值,显示所有的结果
input.autocomplete( "search", "" );
});
},
_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( this.element.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},
_removeIfInvalid: function( event, ui ) {
// 选择一项,不执行其他动作
if ( ui.item ) {
return;
}
// 搜索一个匹配(不区分大小写)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( "option" ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid = true;
return false;
}
});
// 找到一个匹配,不执行其他动作
if ( valid ) {
return;
}
// 移除无效的值
this.input
.val( "" )
.attr( "title", value + " didn‘t match any item" )
.tooltip( "open" );
this.element.val( "" );
this._delay(function() {
this.input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
&nb以上是关于JQuery easyui里面的自动完成autocomplete插件的主要内容,如果未能解决你的问题,请参考以下文章
jquery easyui datagrid分页,前台怎么对所有数据排序?
jquery easyUI datagrid如何让宽度自适应
jquery easyui里面如何设置某列是可以编辑的,并且只能编辑数字,急啊!!!!!!