script.aculo.us Autocompleter functional
控件改进版本例子
从服务端动态下载过滤后的数据: | 输入Name:
NOW FETCHING RESULTS
| 获得code: |
一次性下载数据到本地过滤: | 输入name: | 获得code: |
图例
改进说明:
1、触发热键,原版本中为keypress事件,对于有输入法输入不能够有效触发,同时不支持光标键(这个不知道是否是用的笔记本键盘的原因),改为keyup 事件
2、增加对于常用code name的支持,原版本中只支持一维数组。对于下拉框中value 和 key, 其中,下拉name为显示出来的值
3、从服务端取数据接口数据由原来的<ul><li></li></ul> 改为 [['code','name']]格式
4、增加强制选项(forceValid),默认为true,当控件失去焦点的时候,如果用户输入的值无效,则强制置空
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" >
< head >
< title > script.aculo.us Autocompleter functional test file </ title >
< meta http-equiv ="content-type" content ="text/html; charset=gb2312" />
< script src ="./lib/prototype.js" type ="text/javascript" ></ script >
< script src ="./src/effects.js" type ="text/javascript" ></ script >
< script src ="./src/controls1.js" type ="text/javascript" ></ script >
< LINK href ="./base_2787.css.css" type =text/css rel =stylesheet >
< style type ="text/css" > ...
<!--
.sss {...}{
list-style-type: none;
margin:0;
}
div.auto_complete {...}{
width: 350px;
height:80px;
background: #fff ;
}
div.auto_complete ul {...}{
border:1px solid #888 ;
margin:0;
padding:0;
width:100%;
list-style-type:none;
}
div.auto_complete ul li {...}{
margin:0;
padding:3px;
}
div.auto_complete ul li.selected {...}{
background-color: #ffb ;
}
div.auto_complete ul strong.highlight {...}{
color: #800 ;
margin:0;
padding:0;
}
-->
</ style >
</ head >
< body >
< h1 > script.aculo.us Autocompleter functional </ h1 >
< h1 > 控件改进版本例子 </ h1 >
< br />
< script type ="text/javascript" language ="javascript" charset ="GB2312" >
</ script >
< table width ="100%" border ="0" >
< tr >
< td > 从服务端动态下载过滤后的数据: </ td >
< td > 输入Name:
< input name ="ac2" type ="text" id ="ac2" value ="" />
< div id ="ac2update" class ="auto_complete" >
< img alt ="稍等" id ="indicator" src ="./indicator.gif" style ="display:none;" />
< div id ="ac1_indicator" style ="display:none" > NOW FETCHING RESULTS </ div >
</ td >
< td > 获得code:
< input id ="ac1" type ="text" name ="ac1" /> </ td >
< script type ="text/javascript" language ="JavaScript" charset ="GB2312" > ...
// <![CDATA[
new Ajax.Autocompleter('ac2','ac2update','./value.html', ...{frequency:0.005,indicator:'ac1_indicator'},'ac1');
// ]]>
</ script >
</ tr >
< tr >
< td > 一次性下载数据到本地过滤: </ td >
< td > 输入name:
< input id ="ac5" type ="text" autocomplete ="off" />
< div id ="ac5update" class ="auto_complete" style ="display:none;" ></ div >
</ td >
< td > 获得code: < input id ="ac5Code" type ="text" /></ td >
< script type ="text/javascript" language ="javascript" charset ="GB2312" > ...
// <![CDATA[
var v = '[["0", "国家"], ["1", "敌对国家"],["2", "民族国家"],["3", "Jack Johnson"],["4", "Jane Agnews"]]';
var vdata = eval(v);
new Autocompleter.Local('ac5','ac5update',vdata,
...{ tokens: new Array(',',' '), fullSearch: true, partialSearch: true },"ac5Code");
// ]]>
</ script >
</ tr >
</ table >
</ body >
</ html >
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" >
< head >
< title > script.aculo.us Autocompleter functional test file </ title >
< meta http-equiv ="content-type" content ="text/html; charset=gb2312" />
< script src ="./lib/prototype.js" type ="text/javascript" ></ script >
< script src ="./src/effects.js" type ="text/javascript" ></ script >
< script src ="./src/controls1.js" type ="text/javascript" ></ script >
< LINK href ="./base_2787.css.css" type =text/css rel =stylesheet >
< style type ="text/css" > ...
<!--
.sss {...}{
list-style-type: none;
margin:0;
}
div.auto_complete {...}{
width: 350px;
height:80px;
background: #fff ;
}
div.auto_complete ul {...}{
border:1px solid #888 ;
margin:0;
padding:0;
width:100%;
list-style-type:none;
}
div.auto_complete ul li {...}{
margin:0;
padding:3px;
}
div.auto_complete ul li.selected {...}{
background-color: #ffb ;
}
div.auto_complete ul strong.highlight {...}{
color: #800 ;
margin:0;
padding:0;
}
-->
</ style >
</ head >
< body >
< h1 > script.aculo.us Autocompleter functional </ h1 >
< h1 > 控件改进版本例子 </ h1 >
< br />
< script type ="text/javascript" language ="javascript" charset ="GB2312" >
</ script >
< table width ="100%" border ="0" >
< tr >
< td > 从服务端动态下载过滤后的数据: </ td >
< td > 输入Name:
< input name ="ac2" type ="text" id ="ac2" value ="" />
< div id ="ac2update" class ="auto_complete" >
< img alt ="稍等" id ="indicator" src ="./indicator.gif" style ="display:none;" />
< div id ="ac1_indicator" style ="display:none" > NOW FETCHING RESULTS </ div >
</ td >
< td > 获得code:
< input id ="ac1" type ="text" name ="ac1" /> </ td >
< script type ="text/javascript" language ="JavaScript" charset ="GB2312" > ...
// <![CDATA[
new Ajax.Autocompleter('ac2','ac2update','./value.html', ...{frequency:0.005,indicator:'ac1_indicator'},'ac1');
// ]]>
</ script >
</ tr >
< tr >
< td > 一次性下载数据到本地过滤: </ td >
< td > 输入name:
< input id ="ac5" type ="text" autocomplete ="off" />
< div id ="ac5update" class ="auto_complete" style ="display:none;" ></ div >
</ td >
< td > 获得code: < input id ="ac5Code" type ="text" /></ td >
< script type ="text/javascript" language ="javascript" charset ="GB2312" > ...
// <![CDATA[
var v = '[["0", "国家"], ["1", "敌对国家"],["2", "民族国家"],["3", "Jack Johnson"],["4", "Jane Agnews"]]';
var vdata = eval(v);
new Autocompleter.Local('ac5','ac5update',vdata,
...{ tokens: new Array(',',' '), fullSearch: true, partialSearch: true },"ac5Code");
// ]]>
</ script >
</ tr >
</ table >
</ body >
</ html >
value.html 内容如下:
[[
"
0
"
,
"
撒旦非
"
], [
"
1
"
,
"
的身份
"
],[
"
2
"
,
"
出差
"
],[
"
3
"
,
"
Jack Johnson
"
],[
"
4
"
,
"
Jane Agnews
"
]]