Build jQuery UI Autocomplete - Accent folding in JavaScript

Description

The following code shows how to build jQuery UI Autocomplete - Accent folding.

Example


<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Accent folding</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<!--from w w w  . ja  v  a 2s . c om-->
<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">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>

Click to view the demo

The code above generates the following result.

Build jQuery UI Autocomplete - Accent folding in JavaScript

Home »
  Javascript Tutorial »
    jQuery UI »
      AutoComplete

Javascript Tutorial AutoComplete

Build jQuery UI Autocomplete - Accent foldi...

Build jQuery UI Autocomplete - Categories i...
Build jQuery UI Autocomplete - Combobox in ...
Build jQuery UI Autocomplete - Custom data ...
Build jQuery UI Autocomplete - Default func...
Build jQuery UI Autocomplete - Multiple val...
Build jQuery UI Autocomplete - Scrollable r...