Skip to content
Browse files

Autocomplete: Added demo for accent folding.

Proof of concept for #5219 - Autocomplete: Support for accent-folding.
  • Loading branch information...
1 parent 32bcf56 commit 6a59746d1d97cb24bafe50c1434d9398be9c7585 @scottgonzalez scottgonzalez committed Apr 21, 2010
Showing with 64 additions and 0 deletions.
  1. +64 −0 demos/autocomplete/folding.html
View
64 demos/autocomplete/folding.html
@@ -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>

0 comments on commit 6a59746

Please sign in to comment.
Something went wrong with that request. Please try again.