javascript 自动完成下拉框

script.aculo.us Autocompleter functional

控件改进版本例子


从服务端动态下载过滤后的数据: 输入Name: 获得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>

 value.html 内容如下:

[["0""撒旦非"], ["1""的身份"],["2""出差"],["3""Jack Johnson"],["4""Jane Agnews"]]

JavaScript实现自动完成功能

09-14

用的web控件,一个文本框,一个listbox(规定不能用div)rn当在文本框输入时,listbox出现匹配的结果,类似google搜索框的联想输入rn单击listbox选项的时候,把单击项的内容填到文本框中rnrn问题就出在这单击事件里了,rn1、输入字母a的时候,能正常联想(图1);rn2、单击某一项,listbox被清空了,伤心(图2);rn3、再次输入a,listbox的内容又回来了(图3);rn4、单击某一项,可以把单击项的内容填充到文本框中;rnrn再输入a,goto step1……rn反正会一直重复以上4步,找不到理由啊,特来csdn向各位大虾请教rn[img=http://hiphotos.baidu.com/hlicon/abpic/item/e9ab193ac79a04c115cecbe9.jpg][/img]rn图1rnrn[img=http://hiphotos.baidu.com/hlicon/abpic/item/4ddf6cc775c003309d163de9.jpg][/img]rn图2rnrn[img=http://hiphotos.baidu.com/hlicon/abpic/item/6c0529fb74a46b35a8d311e9.jpg][/img]rn图3rnrn[img=http://hiphotos.baidu.com/hlicon/abpic/item/466055c31924481ee5dd3bc0.jpg][/img]rn图4rnrnrn以下是JavaScript代码rn[code=JScript]rn//显示listboxrnfunction showLstbox()rnrn var txtBox = window.document.getElementById("TextBox1");rn var lstBox = window.document.getElementById("ListBox1");rn var strInput = txtBox.value;rn var arrMatch = new Array();//用以匹配的字符串数组rn var strMatch; //匹配成功的字符串rn arrMatch = ["1111", "aaa", "klkk1", "akl1", "2222a", "ccc","南昌","南昌市高新区"];rn removeAll("ListBox1")rn for (var i = 0; i < arrMatch.length; i++)rn rn strMatch = arrMatch[i];rn if (strMatch.indexOf(strInput) >= 0)rn rn rn var opt = document.createElement("OPTION");rn opt.text = arrMatch[i].toString();rn opt.value = arrMatch[i];rn lstBox.add(opt);rn rn rn if (lstBox.hasChildNodes())rn rn lstBox.style.display = "block"; //显示rn rn elsern rn lstBox.style.display = "none";//隐藏rn rnrnrnrn//将id为listId的列表中的内容全部移除rnfunction removeAll(listId)rnrn var lst = window.document.getElementById(listId);rn var length = lst.options.length;rn for (var i = length; i > 0; i--)rn rn lst.options[i - 1].parentNode.removeChild(lst.options[i - 1]);rn rnrnrnrn//将listbox中选中项的内容复制到文本框中rnfunction moveSelect() rn var txtBox = window.document.getElementById("TextBox1");rn var lstBox = window.document.getElementById("ListBox1");rn var length = lstBox.options.length;rn for (var i = 0; i < length; i++) rn rn var lstindex = lstBox.selectedIndex;rn if (lstindex < 0)rn return;rn txtBox.value = lstBox.options[lstindex].text;rn rn //复制完成后隐藏listboxrn lstBox.style.display = "none"; rnrn[/code]

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试