JQueryUI autocomplete - AND / OR conditions in the selection

Question

I am using http://jsfiddle.net/dhoerster/BXYpt/ from jQuery UI autocomplete with values as the basis. This does exactly what I need, except that I need to have OR conditions. I created a fiddle as a demo:

http://jsfiddle.net/B8bWX/1/

My problem is this: the demonstration elements are a car, a telephone, and a car with a telephone. Is there a way to make autocomplete handle three cases: the line contains the case (default), followed by the ANDed case, and finally the OR case? Therefore, if I enter the "Car Phone", this will lead to:

1) the first case - 0 results, because Car Phone is not a substring of any of the labels.

2) the second case - 1 result, because “Car” and “Phone” appear in “Car with phone”. This is added to the list below 0 previous results.

3) the third case - two more results are displayed, because the labels "Car" and "Phone" contain at least one of the search elements. These results appear below the previous results of steps 1 and 2, so now you should select the selection box below:

Car with telephone

Car

Phone (an order for a car and a phone does not really matter, since they are both equally correct)

Here is the javascript in the question:

$(document).ready(function() { $( "#topics" ).autocomplete({ minLength: 1, source: topics, focus: function( event, ui ) { $( "#topics" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#topics" ).val( ui.item.label ); $("#topicID").val(ui.item.id); $( "#results").text($("#topicID").val()); return false; } }) }); 

So one could do it in order:

1) string.contains (default)

2) string split -> AND condition

3) string split → OR condition (there is no preference for sorting by the number of contained terms)

Answer 1

What we need to do is do our own data search for "AND" and "OR". My first thought was to do this, using the response event to automatically select and add the results to those that were collected by the library itself. However, when I wrote this, I realized that in any case I need to do a normal search to prevent the results from repeating twice. Instead, I will specify a function for the source property and do the whole sorting myself.

(Using an earlier method, I also ran into a jquery-ui error (with new posts showing how many results were found) that did not come up with a new approach.)

Well, this is pretty straight from here, so let me just show the code:

 var topics = [ { value: "carphone", label: "Car With Phone", id: "1"}, { value: "car", label: "Car", id: "2"}, { value: "phone", label: "Phone", id: "3"} ]; $(document).ready(function() { $("#topics").autocomplete({ minLength: 1, focus: function(event, ui) { $("#topics").val(ui.item.label); return false; }, select: function(event, ui) { $("#topics").val(ui.item.label); $("#topicID").val(ui.item.id); $("#results").text($("#topicID").val()); return false; }, source: function(request, response) { var fullResults = []; var andResults = []; var orResults = []; var fullNeedle = request.term; var needles = $.grep(fullNeedle.split(" "), function(element) { return element !== ''; }); $.each(topics, function(key, topic) { var found = 0; $.each(needles, function(needleKey, needle) { if (topic.label.toLowerCase().indexOf(needle.toLowerCase()) != -1) { found++; } }); if (topic.label.toLowerCase().indexOf(fullNeedle.toLowerCase()) != -1) { fullResults.push(topic); } else if (found == needles.length) { andResults.push(topic); } else if (found > 0) { orResults.push(topic); } }); $.merge(fullResults, andResults); $.merge(fullResults, orResults); response(fullResults); } }); }); 

A small explanation: we no longer bring our topics to the library as a source, but instead we save the source for ourselves when we ourselves look for it. We do this using three arrays, each of which will contain one of three types of results, so we can maintain order correctly. Finally, we merge the three arrays after we have finished filling them.