- jQuery UI Autocomplete是大家熟悉的一款输入提示插件,可实现像百度搜索那样的输入框提示功能,在Windows系统中叫做“自动完成”,当用户的输入有匹配内容的时候,输入框会下拉出很多相关选项,供用户选择,大大提升用户体验。测试时请试着在第一个文本框中输入以a b c开头的单词。
点击(此处)折叠或打开
- <!doctype html>
- <html lang=\"en\">
- <head>
- <meta charset=\"utf-8\" />
- <title>jQuery UI Autocomplete自动完成下拉框提示</title>
- <script src=\"/ajaxjs/jquery-1.6.2.min.js\"></script>
- <script src=\"/ajaxjs/jquery-ui-1.8.20.min.js\"></script>
- <script>
- $(function() {
- var availableTags = [
- \"ActionScript\",
- \"AppleScript\",
- \"Asp\",
- \"BASIC\",
- \"C\",
- \"C++\",
- \"Clojure\",
- \"COBOL高\",
- \"ColdFusion\",
- \"Erlang\",
- \"Fortran\",
- \"Groovy\",
- \"Haskell\",
- \"Java\",
- \"JavaScript\",
- \"Lisp\",
- \"Per高l\",
- \"PHP\",
- \"Python\",
- \"Ruby\",
- \"Scala\",
- \"Sche高\"
- ];
- $( \"#tags1\" ).autocomplete({
- source: availableTags
- });
- $(\"#tags2\").autocomplete({
- source: [\"a\", \"b\", \"c\"]
- });
- //页面加载
- $(\"#tags3\").autocomplete({
- source: DataSouce1()
- });
- //数据库
- $(\"#tags4\").autocomplete({
- source: function( request, response ) {
- var name=$.ui.autocomplete.escapeRegex( request.term );
- response( $.grep( DataSouce2(name), function( item ){
- return item;
- }) );
- }
- });
- //利用ajax页面加载就获取到数据源
- function DataSouce1()
- {
- var mycars=new Array()
- for (var i = 0; i <100; i++) {
- mycars[i]=\"高\"+i;
- };
- return mycars;
- }
- //利用ajax根据输入的到数据库查找 相当于
- function DataSouce2(name)
- {
- var mycars=new Array()
- for (var i = 0; i <100; i++) {
- mycars[i]=name+\"_\"+i;
- };
- return mycars;
- }
- });
- </script>
- </head>
- <body>
- 测试时请试着在第一个文本框中输入以a b c开头的单词。<br>
- <div class=\"ui-widget\">
- <label for=\"tags\">Tags: </label>
- <input id=\"tags1\" />
- <input id=\"tags2\" />
- <input id=\"tags3\" />
- <input id=\"tags4\" />
- </div>
- </body>
- </html>
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29737856/viewspace-1250994/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/29737856/viewspace-1250994/