JQuery UI的Autocomplete用法
程序员文章站
2022-07-13 22:53:36
...
1.下拉框中出现的是包含当前输入字母的元素
例如:当输入C时,会出现C++,coldfusion和javascript的可选项
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>autocomplete demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> </head> <body> <label for="autocomplete">Select a programming language: </label> <input id="autocomplete"> <script> $( "#autocomplete" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] }); </script> </body> </html>
2.下拉框中出现的是以当前输入字母打头的元素
例如:当输入C时,会出现C++,coldfusion的可选项
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>autocomplete demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> </head> <body> <label for="autocomplete">Select a programming language: </label> <input id="autocomplete"> <script> var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]; $( "#autocomplete" ).autocomplete({ source: function( request, response ) { var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( tags, function( item ){ return matcher.test( item ); }) ); } }); </script> </body> </html>
RegExp对象:第一个参数是一个字符串,指定了正则表达式的模式或其他正则表达式。第二个参数的i表示“执行对大小写
不敏感的匹配。”,也可为
g - 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m - 执行多行匹配。
$.ui.autocomplete.escapeRegex:该函数会处理一个String,会对该String进行正则表达式的转义,
使之对于RegExp 来说是安全的。
推荐阅读