jquery UI autocomplete remote multiple value option

Question

В настоящее время у меня есть код, который работает с использованием автозаполнения пользовательского интерфейса и, кажется, отображает правильные данные, которые я получаю из своей базы данных mysql. Теперь я хочу усложнить ситуацию, сумев принять более 1 значения. Я искал интернет вверх и вниз и до сих пор не могу исправить свой код, чтобы работать, я новичок с jquery и специально с автозаполнением. Вот то, что я до сих пор ..

$('#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, 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"; 
     } 
    } 
}); 

Это ответ я получаю от company_search.php ...

[{"compid":"36","value":"MCDONALD OF ALL SAINTS RD","address":"9261 all saints rd","phone":"","problematic":"0","zipcode":"20723","city":"Laurel","state":"MD","completeaddress":"9261 all saints rd, Laurel, MD, 20723"},{"compid":"37","value":"MCDONALD OF BOWIE","address":"4306 nw CRAIN HWY","phone":"","problematic":"0","zipcode":"20716","city":"Bowie","state":"MD","completeaddress":"4306 nw CRAIN HWY, Bowie, MD, 20716"}] 

До сих пор все это работает, как я хочу, но это не делает принять более 1 значения, как я могу это достичь? Заранее спасибо !!

Answer 1

Наконец-то я нашел ответ на свои проблемы! Это окончательный код с использованием нескольких значений/входов с получением ответов от удаленной базы данных mysql.

$(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"; 
     } 
    } 
}); 

});

Теперь это работает как шарм. Надеюсь, это поможет кому-то еще найти ответ.