减小字体
增大字体- ·上一篇文章：jQuery UI 实例 - 折叠面板（Accordion）
- ·下一篇文章：jQuery UI 实例 - 按钮（Button）
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS02 → 文章内容
jQuery UI 实例 - 自动完成（Autocomplete）
jQuery UI 实例 - 自动完成（Autocomplete）根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。如需了解更多有关 autocomplete 部件的细节，请查看 API 文档 自动完成部件（Autocomplete Widget）。本章节使用到 search.php 下载。默认功能当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在本实例中，提供了编程语言的建议选项，您可以输入 "ja" 尝试一下，可以得到 Java 或 JavaScript。数据源是一个简单的 JavaScript 数组，使用 source 选项提供给部件。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "
#tags" ).autocomplete({ source:
availableTags }); }); </script></head><body> <div class="ui-widget"> <label for="tags">标签：</label> <input id="tags"></div> </body></html>查看演示包含重音autocomplete 域使用自定义的 source 选项来匹配带有重音字符的结果项，即使文本域不包含重音字符也会匹配。但是如果您在文本域中键入了重音字符，则不会显示非重音的结果项。尝试键入 "Jo"，会看到 "John" 和 "J?rn"，然后 键入 "J?"，只会看到 "J?rn"。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 包含重音</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <script> $(function() { var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ]; var accentMap = { "á":
"a", "ö":
"o" }; var normalize = function( term ) { var ret = ""; for ( var i = 0; i < term.length; i++ ) { ret += accentMap[ term.charAt(i) ] || term.charAt(i); } return ret; }; $( "
#developer" ).autocomplete({ source:
function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( names, function( value ) { value = value.label || value.value || value; return matcher.test( value ) || matcher.test( normalize( value ) ); }) ); } }); }); </script></head><body> <div class="ui-widget"> <form> <label for="developer">开发人员：</label> <input id="developer"> </form></div> </body></html>查看演示分类分类的搜索结果。尝试键入 "a" 或 "n"。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 分类</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <style> .ui-autocomplete-category { font-weight:
bold; padding:
.2em .4em; margin:
.8em 0 .2em; line-height:
1.5; } </style> <script> $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu:
function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } }); </script> <script> $(function() { var data = [ { label:
"anders", category:
"" }, { label:
"andreas", category:
"" }, { label:
"antal", category:
"" }, { label:
"annhhx10", category:
"Products" }, { label:
"annk K12", category:
"Products" }, { label:
"annttop C13", category:
"Products" }, { label:
"anders andersson", category:
"People" }, { label:
"andreas andersson", category:
"People" }, { label:
"andreas johnson", category:
"People" } ]; $( "
#search" ).catcomplete({ delay:
0, source:
data }); }); </script></head><body> <label for="search">搜索：</label><input id="search"> </body></html>查看演示组合框（Combobox）一个由 Autocomplete 和 Button 创建的自定义部件。您可以键入一些字符，来获得基于您的输入过滤的结果，或者使用按钮从完整列表中选择。该输入是从一个已有的 select 元素中读取，传递给带有自定义的 source 选项的 Autocomplete。这是一个不被支持的不完美的部件。这里纯粹是为了演示 autocomplete 定制功能。如需了解更多有关该部件工作原理的细节，请点击这里查看相关的 jQuery 文章。<!do
//jqueryui.com/resources/demos/style.css"> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "
#tags" ).autocomplete({ source:
availableTags }); }); </script></head><body> <div class="ui-widget"> <label for="tags">标签：</label> <input id="tags"></div> </body></html>查看演示包含重音autocomplete 域使用自定义的 source 选项来匹配带有重音字符的结果项，即使文本域不包含重音字符也会匹配。但是如果您在文本域中键入了重音字符，则不会显示非重音的结果项。尝试键入 "Jo"，会看到 "John" 和 "J?rn"，然后 键入 "J?"，只会看到 "J?rn"。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 包含重音</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <script> $(function() { var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ]; var accentMap = { "á":
"a", "ö":
"o" }; var normalize = function( term ) { var ret = ""; for ( var i = 0; i < term.length; i++ ) { ret += accentMap[ term.charAt(i) ] || term.charAt(i); } return ret; }; $( "
#developer" ).autocomplete({ source:
function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( names, function( value ) { value = value.label || value.value || value; return matcher.test( value ) || matcher.test( normalize( value ) ); }) ); } }); }); </script></head><body> <div class="ui-widget"> <form> <label for="developer">开发人员：</label> <input id="developer"> </form></div> </body></html>查看演示分类分类的搜索结果。尝试键入 "a" 或 "n"。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 分类</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <style> .ui-autocomplete-category { font-weight:
bold; padding:
.2em .4em; margin:
.8em 0 .2em; line-height:
1.5; } </style> <script> $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu:
function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } }); </script> <script> $(function() { var data = [ { label:
"anders", category:
"" }, { label:
"andreas", category:
"" }, { label:
"antal", category:
"" }, { label:
"annhhx10", category:
"Products" }, { label:
"annk K12", category:
"Products" }, { label:
"annttop C13", category:
"Products" }, { label:
"anders andersson", category:
"People" }, { label:
"andreas andersson", category:
"People" }, { label:
"andreas johnson", category:
"People" } ]; $( "
#search" ).catcomplete({ delay:
0, source:
data }); }); </script></head><body> <label for="search">搜索：</label><input id="search"> </body></html>查看演示组合框（Combobox）一个由 Autocomplete 和 Button 创建的自定义部件。您可以键入一些字符，来获得基于您的输入过滤的结果，或者使用按钮从完整列表中选择。该输入是从一个已有的 select 元素中读取，传递给带有自定义的 source 选项的 Autocomplete。这是一个不被支持的不完美的部件。这里纯粹是为了演示 autocomplete 定制功能。如需了解更多有关该部件工作原理的细节，请点击这里查看相关的 jQuery 文章。<!do
jQuery UI 实例 - 自动完成（Autocomplete）
