无论输入项如何，jQuery 自动完成都会建议所有选项

Question

我有一个 jQuery 脚本，它将获取 JSON 响应并创建响应中尽可能多的“播放器”对象。

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

当用户选择玩家名称并点击“添加”按钮时，此时只会显示玩家的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
            }
        });
    }