自动完成(Autocomplete) - 包含重音
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>