You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.6 KiB
51 lines
1.6 KiB
5 years ago
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>jQuery UI Autocomplete - Accent folding</title>
|
||
|
|
<link rel="stylesheet" href="../../themes/base/all.css">
|
||
|
|
<link rel="stylesheet" href="../demos.css">
|
||
|
|
<script src="../../external/requirejs/require.js"></script>
|
||
|
|
<script src="../bootstrap.js">
|
||
|
|
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">Developer: </label>
|
||
|
|
<input id="developer">
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-description">
|
||
|
|
<p>The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.</p>
|
||
|
|
<p>Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".</p>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|