All geek questions in one place

JQuery UI Autocomplete using both categories and emphasis at the same time

I am using jQuery UI autocomplete widget. I want to be able to use two different functions at the same time: categories and emphasis.

I can get both to work independently using the source code from the jQuery UI website (http://jqueryui.com/autocomplete/).

For categories:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Categories</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style> .ui-autocomplete-category { font-weight: bold; padding: .2em .4em; margin: .8em 0 .2em; line-height: 1.5; } </style> <script> $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } }); </script> <script> $(function() { var data = [ { label: "anders", category: "" }, { label: "andreas", category: "" }, { label: "antal", category: "" }, { label: "annhhx10", category: "Products" }, { label: "annk K12", category: "Products" }, { label: "annttop C13", category: "Products" }, { label: "anders andersson", category: "People" }, { label: "andreas andersson", category: "People" }, { label: "andreas johnson", category: "People" } ]; $( "#search" ).catcomplete({ delay: 0, source: data }); }); </script> </head> <body> <label for="search">Search: </label> <input id="search" /> </body> </html>

and for bending emphasis:

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Accent folding</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <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> </body> </html>

I thought I could replace the “source” in the category example (which is the source: data) with the “source” in the accent addition example (which is the source: function (request, answer) ......), but it seems , does not work.

So, how can I combine the functionality of categories and emphasis in one autocomplete?

Thanks.

+4
source share
1 answer

I prefer to integrate the emphasis bending logic into the filter rather than, as in the jquery example, to control the original elements. Thus, you can use all the functions, including grouping categories, highlighting a search query ....

Step 1: Extend $ .ui.autocomplete with axial-sensitive (* AI) shutter speed and filter

 $.extend($.ui.autocomplete, { escapeRegexAI: function (value) { return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&") .replace("a", "[a|ä|à|â]") .replace("c", "[c|ç]") .replace("e", "[e|é|è|ê|ë]") .replace("i", "[i|î|ï]") .replace("o", "[o|ö|ô]") .replace("u", "[u|ü|ù|û]") .replace("y", "[y|ÿ]"); }, filterAI: function (array, term) { var matcher = new RegExp($.ui.autocomplete.escapeRegexAI(term), "i"); return $.grep(array, function (value) { return matcher.test(value.label || value.value || value); }); } });

Step 2: Call Autocomplete Using an Accent-Insensitive Filter

 $( "#developer" ).autocomplete({ source: function( request, response ) { response($.ui.autocomplete.filterAI(data, request.term)); } });
+2
source

Source: https://habr.com/ru/post/1441088/

More articles:


All Articles