jquery UI autocomplete remote multiple value option

Question

I currently have a code working using the UI autocomplete and seems to display the correct data I get from my mysql DB. Now I want to complicate things by been able to accept more than 1 value. I have searched the internet up and down and still cannot fix my code in order to work, I am a newbie with jquery and specially with autocomplete. Here is what I have so far.. ``` $('#companyautocomplete').autocomplete({ source: function(request, response) { //separator: ' ', $.ajax({ url: "company_search.php", dataType: "json", data: { name_startsWith: request.term, term: $('#companyautocomplete').val(), }, success: function(data) { response($.map(data, function(item) { return { compid: item.compid, label: item.value + ' (' + item.address + ', ' + item.city + ', ' + item.state + ', ' + item.zipcode + ')', value: item.value, address: item.address + ', ' + item.city + ', ' + item.state + ', ' + item.zipcode, phone: item.phone, problematic: item.problematic } })) }, }); }, select: function(event,…

Accepted Answer

Finally I found an answer to my problems !! This is the final code using multiple values/inputs with getting responses from a remote mysql DB.

```
$(function() {
    function split( val ) {
    return val.split( /,\s*/ );
    }
    function extractLast( term ) {
    return split( term ).pop();
    }

$( "#companyautocomplete" )
    // don't navigate away from the field on tab when selecting an item
    .bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB &&
    $( this ).data( "autocomplete" ).menu.active ) {
    event.preventDefault();
    }
    })
    .autocomplete({
    source: function( request, response ) {
        $.getJSON( "company_search.php",{
            term: extractLast( request.term )},
            function( data ) {
            response( $.map( data, function( item ) {
                  return {
                        compid: item.compid,
                        label: item.value + ' (' + item.address + ', ' + item.city + ', ' + item.state + ', ' + item.zipcode + ')',
                        value: item.value,
                        address: item.address + ', ' + item.city + ', ' + item.state + ', ' + item.zipcode,
                        phone: item.phone,
                        problematic: item.problematic
                  }
            }));
        }
    );
    },
    search: function() {
        // custom minLength
        var term = extractLast(this.value);
        if (term.length < 3) {
            return false;
        }
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function( event, ui ) {
        $('#companyautocomplete').val(ui.item.value);
        $('#companyid').val(ui.item.compid);
        $('#c_address').val(ui.item.address);
        $('#c_phone').val(ui.item.phone);
        if (ui.item.problematic!=1){
            $('#companyautocomplete').removeClass("ui-autocomplete-error");
            document.getElementById('Sendbutton').style.display="block";
        } else {
            $('#companyautocomplete').addClass("ui-autocomplete-error");
            document.getElementById('Sendbutton').style.display="none";
        }
    }
});
```

});

Now it works like a charm. I hope this helps someone else looking for an answer.

jquery UI autocomplete remote multiple value option

Solution

Problem