jQuery Autocomplete UI search all directions -


i'm using jquery autocomplete show results list of approximately 2000 records. because list in opinion long need filter search through these records.

i modified source able search not in label field, in value field. want can search "s4 galaxy" wil find "samsung galaxy s4". standard jquery autocomplete can search left right, "galaxy s4" found, not "s4 galaxy". want @ "gal s4" , find "samsung galaxy s4".

as extra, nice if match made bold > "samsung galaxy s4"

the complete code use stands below:

var completeresults = [{     value: "s4 iv",     label: "samsung galaxy s4",     image: "samsung_galaxy_s_iv_1.jpg" }, {     value: "stackoverflow",     label: "nokia lumia 920",     image: "nokia_lumia_920_1.jpg" }]; 

completeresults short list! normaly 2000 records.

function custom_source(request, response) {     var matcher = new regexp($.ui.autocomplete.escaperegex(request.term), "i");     response($.grep(completeresults, function (value) {         return matcher.test(value.value) || matcher.test(value.label);     })); }  $("#s").autocomplete({     source: custom_source,     minlength: 0 }).data("ui-autocomplete")._renderitem = function (ul, item) {     var inner_html = "<a><img src='../img/type/120x200/" + item.image + "' width='21' height='35'/><span class='title'>" + item.label + "</span></a>";      return $("<li></li>")         .data("item.autocomplete", item)         .append(inner_html)         .appendto(ul); }; 

okay here's should work (minus bolding of text, i'll to). strategy to:

  1. create regular expression out of each term user types. can splitting input on ' '.
  2. for every choice in list of possible choices, see if choice matches every single regex extracted in step 1.
  3. only return values meet criteria in step 2.
function custom_source(request, response) {      // create array of regular expressions user's input:     var terms = $.map(request.term.split(' '), function (term) {         // ignore whitespace:         if ($.trim(term)) {             return new regexp($.ui.autocomplete.escaperegex(term), 'i');         }     });      response($.grep(completeresults, function (value) {         var found = true             ,             , regex;          // every result, iterate on every term extracted earlier , make sure matches:         (i = 0; < terms.length && found; i++) {             regex = terms[i];             found = found && (regex.test(value.value) || regex.test(value.label));         }          return found;     })); } 

example: http://jsfiddle.net/aa5nk/73/

the other part of question answered in following question:

jqueryui: how can custom-format autocomplete plug-in results?


Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -