javascript 自动完成下拉框

最新推荐文章于 2019-06-27 09:14:00 发布

winderain

最新推荐文章于 2019-06-27 09:14:00 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVA 文章标签： javascript autocomplete stylesheet input div border

本文链接：https://blog.youkuaiyun.com/winderain/article/details/1892021

JAVA 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个改进版的Autocompleter控件实现，包括使用keyup事件代替keypress事件以提高兼容性，增加了对常用codename的支持，并且修改了数据格式及增加forceValid选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">

<head>

<title>script.aculo.us Autocompleter functional test file</title>

<!--

.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>

<tr>

<td>从服务端动态下载过滤后的数据：</td>

<td> 输入Name：

<div id="ac1_indicator" style="display:none">NOW FETCHING RESULTS</div>

</td>

<td>获得code:

// <![CDATA[

new Ajax.Autocompleter('ac2','ac2update','./value.html', {frequency:0.005,indicator:'ac1_indicator'},'ac1');

// ]]>

</script>

</tr>

<tr>

<td>一次性下载数据到本地过滤：</td>

<td>输入name：

</td>

<td>获得code:<input id="ac5Code" type="text" /></td>

// <![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"]]