推荐一个Jquery插件:autoComplete

时间:2021-11-06 13:16:29

 

类似于google搜索框的自动完成机制.

 

代码很简单,  以下就实现了一个以本地数据作为自动完成的演示

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  2.                     "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  6.   <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  7.   <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  8.   <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  9.   <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  10.   <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  11.   <script>
  12.   $(document).ready(function(){
  13.     var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
  14. $("#example").autocomplete(data);
  15.   });
  16.   </script>
  17.   
  18. </head>
  19. <body>
  20.   API Reference: <input id="example" /> (try "C" or "E")
  21. </body>
  22. </html>

http://www.neatstudio.com/show-34-1.shtml

http://docs.jquery.com/Plugins/Autocomplete#Demos

http://www.dyve.net/jquery/?autocomplete