jQuery autocomplete: how to split the string result?

Question

I have the following situation with an autocomplete plugin on an .aspx page. It is working fine. The result from the autocomplete search yields a product id and a product description is concatenated with it (i.e. 2099 -- A Product). I know that I need to use split() with this but where do I put it? I'm still rather new to jQuery and javascript.

$(document).ready(function() {
  $('.divAutoComplete').autocomplete("LookupCodes.aspx?type=FC", { 
     mustMatch: true 
  });
});

Answer 1

If it's the same autocomplete I've used (by Tomas Kirda) you should be able to add an onSelected event like so:

$(document).ready(function() {
  $('.divAutoComplete').autocomplete("LookupCodes.aspx?type=FC", { 
     mustMatch: true,
     onSelect: function(value, data) { autoCompleteSelected(value, data); }
  });
});

function autoCompleteSelected(value, data) {
    var parts = data.split("--");
 ... do something with parts

}

Obviously, if it's not the then it will have different events

Answer 2

In JavaScript, any string can be split using the split function like so:

"Pandas enjoy tasty bamboo".split(' ')

The above splits the string on spaces returning the following array:

["Pandas", "enjoy", "tasty", "bamboo"]

Any string can be fed to the split function and it'll cope with multi-character strings just fine.

Now as for your question with the jQuery autocomplete plugin, you'll need to have your .aspx page return a JS array of options in order for it to work. Alternatively, you can load the data some other way and then pass an array to autocomplete. If the server returns an array like the following then you can pass it directly:

["1234 -- Chicken", "4321 -- Noodle", "1432 -- Irrational Monkeys"]

The point is that autocomplete uses an array for matching.

The docs for the autocomplete plugin seem decent enough.

Answer 3

do this code for splitting

$(function() { var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; function split(val) { return val.split(/,\s*/); } function extractLast(term) { return split(term).pop(); } $("#tags").autocomplete({ minLength: 0, source: function(request, response) { // delegate back to autocomplete, but extract the last term response($.ui.autocomplete.filter(availableTags, extractLast(request.term))); }, focus: function() { // prevent value inserted on focus return false; }, select: function(event, ui) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(", "); return false; } }); });

Answer 4

for spliting

$(function() { var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; function split(val) { return val.split(/,\s*/); } function extractLast(term) { return split(term).pop(); } $("#tags").autocomplete({ minLength: 0, source: function(request, response) { // delegate back to autocomplete, but extract the last term response($.ui.autocomplete.filter(availableTags, extractLast(request.term))); }, focus: function() { // prevent value inserted on focus return false; }, select: function(event, ui) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(", "); return false; } }); });