library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Autocomplete: Added demo for accent folding.

Browse Source 
Proof of concept for #5219 - Autocomplete: Support for accent-folding.
This commit is contained in:
Scott González 2010-04-21 10:02:53 -04:00
parent 32bcf56584
commit 6a59746d1d
1 changed files with 64 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
demos/autocomplete/folding.html Normal file
View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Autocomplete Accent Folding Demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(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="demo">
<div class="ui-widget">
<form>
<label for="developer">Developer: </label>
<input id="developer" />
</form>
</div>
</div><!-- End demo -->
<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><!-- End demo-description -->
</body>
</html>