jQueryオートコンプリートは入力項目に関係なくすべてのオプションを提案します

Question

私はJSONレスポンスを取得し、レスポンスにある数の "player"オブジェクトを作成するjQueryスクリプトを用意しています。ユーザーは、プレイヤー名を選択し、それが意志「追加」ボタンをクリックすると

それは、その後の時点で、私はその後、autocomplete

のsource:フィールドの変数として使用availablePlayersに追加されます、ただ表示プレーヤーの​​と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

あなたの問題は、目であります電子源機能。 ソース関数は、クエリにtermパラメータを渡すためにrequestを使用しますが、無視しています。 あなたが照会するavailablePlayersを使用している場合は、応答パラメータに{ラベル、テキスト}オブジェクトをマッピングするために

source: availablePlayers 

とあなたの現在の機能を使用する必要があります。

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