Input控件Javascript自动提示功能

在web界面中Input控制要提供自动下拉与提示功能，是相当复杂的功能，只有javascript高手才可这个心情写如些复杂的javascript，而如果同时考虑到效率，那就可以更加的困难了。下面就介绍这样的功能，调用也相当的简单，是一个相当强大的javascript功能。

源网址
http://www.codeproject.com/KB/scripting/AutoSuggestControl.aspx
你可以在这里下载到源代码。

效果图


 
输入字母之后，如：字母v,如果源代码中，js有数组包括以这些单词开头的词语，就会出现下拉，并把input框中的字母在下拉词语中使用下划线标明，这是相当智能化的。如果已经找到了要的词语，就可以使用下拉箭头来选择。一旦选定了词语，被选定的词语就会变成红色，而其当前的行就变成灰色。

使用方法
只使用一个js文件autosuggest.js，图片同有4个，html调用页面相当的简结和标准。
Html页面内容如下：

<html>
 <head>
  <script type="text/javascript" src="autosuggest.js"></script>
  <script>

   var custom_array = ['audi','bentley','buick','chevrolet','chysler','dodge','ford','gm','honda','hyundai','isuzu','jeep','kia','lamborghini',
'mazda','nissan','opel','pontiac','renault','saab','toyota','volkswagen','volkswagen2'];

   var custom_array_2 = [['audi', 1],['bentley', 2],['buick', 3],['chevrolet',4],['chysler',5],['dodge',6],['ford',7],['gm',8],['honda',9],['hyundai',10],['isuzu',11],['jeep',12],['kia',13],['lamborghini',14],['mazda',15],['nissan',16],['opel',17],['pontiac',18],['renault',19],['saab',20],['toyota',21],['volkswagen',22],['volkswagen2',23]];
   </script>
 </head>

 <body>
  <input type='text' style='font-family:verdana;width:300px;font-size:12px' id='tb' value=''/>
  <script> new actb('tb', custom_array_2, null); </script>

</body></html>
posted @ 2011-03-31 16:18  天地任我飞翔  Views(483)  Comments(0)    收藏  举报