jquery-ui-autocomplete - jquery UI 自动完成远程多值选项

Question

我目前有一个使用 UI 自动完成功能的代码，并且似乎显示了我从 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";
        }
    }
});

});

现在它就像一个魅力。我希望这可以帮助其他人寻找答案。