CODEWITHSUNDEEP
jqueryjquery-uiautocompletejquery-autocomplete
Peter
Peter

Reputation: 89

Autocomplete jquery with accent folding and links

Hello I have this autocomple jquery script on my page: 

 var source = [ { value: "http://www.bata.com",  
                  label: "Baťa"  
                 },  
                { value: "http://www.bata.com",  
                  label: "Bata"  
                 },  
             ];  


$(document).ready(function() {   
    $("input#autocomplete").autocomplete({  
       source: source,    
       select: function( event, ui ) {   
        window.location.href = ui.item.value;  
       }  
    });  
});

<input id="autocomplete" />

and everytning is OK, but I want to add in this code accent folding like here: https://jqueryui.com/autocomplete/#folding

because, when I write in input box:
"bata" autocomplete shows: Bata
"baťa" autocomplete shows: Baťa

I want this: when I write in input box:
"bata" autocomplete show: Bata, Baťa

thanx

Upvotes: 1

Views: 1347

Answers (1)

BenG
BenG

Reputation: 15164

Within the link, click on view source shows the usage.

Here's how it works for you:-

 var source = [ { value: "http://www.bata.com",  
                  label: "Baťa"  
                 },  
                { value: "http://www.bata.com",  
                  label: "Bata"  
                 },  
             ];

var accentMap = {
      "á": "a",
      "ö": "o",
      "ť": "t"
      // ADD MORE HERE
    };

var normalize = function( term ) {
      var ret = "";
      for ( var i = 0; i < term.length; i++ ) {
        ret += accentMap[ term.charAt(i) ] || term.charAt(i);
      }
      return ret;
    }

$("input#autocomplete").autocomplete({  
    source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response($.grep(source, function(value) {
            return matcher.test(value.label) || matcher.test(normalize(value.label));
        	}) 
        );
    },
    select: function( event, ui ) {   
        window.location.href = ui.item.value;  
    }  
}); 
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<input id="autocomplete" />

Upvotes: 1

Related Questions