jQuery autocomplete: how to split the string result?

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 
  });
});

Answers


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


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.


do this code for splitting

<script type="text/javascript">
    $(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;
            }
        });
    });
    </script>

Need Your Help

Receiving a json response in Symfony 2

jquery ajax json symfony

I have a javascript event listener on the search.html.twig page that will trigger an ajax request. In the example below, my goal is for the ajax call to be successful so the alert() message is exec...