無論輸入條目如何，jQuery自動完成都會建議所有選項

Question

我有一個jQuery腳本，它將獲得JSON響應並創建與響應中一樣多的“播放器”對象。

然后它將添加到availablePlayers ，然后我將其用作source:的變量source: autocomplete字段

當用戶選擇一個玩家名稱並點擊“添加”按鈕時，此時，它只會顯示玩家的guid和name 。

但是，無論我輸入什么字母，所有玩家都可以選擇。 為了說明這一點，如果我輸入“Z”並且沒有一個玩家的名字中有Z，他們的選項仍會顯示。

如何優化此功能？

HTML

<div class="player-widget">
    <label for "players">Players</label>
    <input id="player" />
    <input id="playerGUID" hidden />
    <button id="add">Add</button>
</div>

jQuery的

$(document).ready(function(){

var availablePlayers = []; // BLANK ARRAY OF PLAYERS

$("#player").autocomplete({
    source: availablePlayers,
    response: function (event, ui) {
        ui.content = $.map(ui.content, function(value, key) {
            return {
                label: value.name,
                value: value.guid
            }
        });
    },
    focus: function(event, ui) {
        $("#player").val(ui.item.label);
        return false;
    },
    select: function (event, ui) {
        $("#player").val(ui.item.label); // display the selected text
        $("#playerGUID").val(ui.item.value); // save selected id to hidden input
        return false;
    }
});

$.getJSON("http://localhost/Websites/Player-Widgets/service.php", function(data) {

    var feedHTML = '';
    // LOOP THROUGH EACH PLAYER
    $.each(data.players, function(i, player) {

        // DEFINE VARIABLES - BASED ON PLAYER ATTRIBUTES
        var guid = player.guid;
        var name = player.name;
        var dob = player.date_of_birth;
        var birth = player.birthplace;
        var height = player.height;
        var weight = player.weight;
        var position = player.position;
        var honours = player.honours;

        // CREATE NEW PLAYER (OBJECT)
        var player = {
            guid: guid,
            name: name,
            position: position
        };

        // ADD TO PLAYER TAG ARRAY
        availablePlayers.push(player);
    });

    console.log("User friendly array");
    $.each(availablePlayers, function(i, val) {
        console.log(val.guid + " - " + val.name + " [" + val.position + "]");
    });

    console.log("Array printout");
    console.log(JSON.stringify(availablePlayers));

}).done(function(){
    console.log("Done! Success!");
    $("#player").autocomplete("option", "source", availablePlayers);
});

$("#add").click(function() {
    alert($("#playerGUID").val() + " - " + $("#player").val());
});

});

示例JSON響應

{
"players": [
    {
        "guid": "1",
        "name": "Matias Aguero",
        "date_of_birth": "1981-02-13",
        "birthplace": "San Nicolas, Argentina",
        "height": "1.83m (6' 0\")",
        "weight": "109kg (17st 2lb)",
        "position": "Prop",
        "honours": "40 caps"
    },
    {
        "guid": "2",
        "name": "George Catchpole",
        "date_of_birth": "1994-02-22",
        "birthplace": "Norwich, England",
        "height": "1.85em (6ft 1\")",
        "weight": "104kg (16st 5lb)",
        "position": "Centre",
        "honours": ""
    }
]
}

Answer 1

您的問題出在源函數中。 源函數使用請求傳遞術語參數進行查詢，而您忽略它。 如果您使用availablePlayers進行查詢，則應使用

source: availablePlayers

和當前函數在響應參數中映射{label，text}對象。

response: function (event, ui) {
        ui.content = $.map(ui.content, function(value, key) {
            return {
                label: value.name,
                value: value.guid
            }
        });
    }