类似于google搜索框的自动完成机制.
代码很简单, 以下就实现了一个以本地数据作为自动完成的演示
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <script src="http://code.jquery.com/jquery-latest.js"></script>
- <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
- <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
- <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
- <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
- <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
- <script>
- $(document).ready(function(){
- var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
- $("#example").autocomplete(data);
- });
- </script>
- </head>
- <body>
- API Reference: <input id="example" /> (try "C" or "E")
- </body>
- </html>
http://www.neatstudio.com/show-34-1.shtml