有个朋友给个维护的代码叫我帮忙看,在初始化页面的时候就给那些文本框添加了autocomplete 给了指定的数组资源。
他的要求就是点击文本框,就要出现三个默认的下拉列表,不能是全部的 三个值完全不一样,没法搜索。
首先是解决点击就出现列表的问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<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,
_source:['Java','Scala','good']
minLength:0,
create: function(event, ui) {
$(this).bind("click",function(){
var active=$(this).data("autocomplete");
if(!active){
$(this).autocomplete("search" , "");
}
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
添加一个创建就绑定点击的事件,点击就执行搜索方法,搜索空字符。
但是这样子全都搜索出来了。
没办法硬着头皮 修改jquery.ui.js里面的代码。
修改 search 方法 当value为 "" 空字符的时候,就把数组备份起来,然后把默认的数组赋上去。 当不是空的字符串 就把备份的数组拿出来,然后搜索。
首先添加一个备份的
_source: null,
$.widget( "ui.autocomplete", {
version: "1.11.4",
defaultElement: "<input>",
options: {
appendTo: null,
autoFocus: false,
delay: 300,
minLength: 1,
position: {
my: "left top",
at: "left bottom",
collision: "none"
},
source: null,
_source: null,
// callbacks
change: null,
close: null,
focus: null,
open: null,
response: null,
search: null,
select: null
},
然后修改 search 方法
search: function( value, event ) {
value = value != null ? value : this._value();
// always save the actual value, not the one passed as an argument
this.term = this._value();
if ( value.length < this.options.minLength ) {
return this.close( event );
}
if ( this._trigger( "search", event ) === false ) {
return;
}
if(''==value){
this.options.source = <span style="font-family: Arial, Helvetica, sans-serif;">this._source</span><span style="font-family: Arial, Helvetica, sans-serif;">;</span>
this._initSource();
}else{
this.options.source = this.source;
this._initSource();
}
return this._search( value );
},
添加 ''==value 的判断 如果是空就备份 然后给默认值 然后 初始化资源。
如果 不为空 就把备份的拿出来 然后 再搜索。