javascript - 将输入字段中的键与我的 json 对象匹配

Question

$ (function() {

  var heroes = {

    "Abaddon":{
      "counters": "Undying" + "Anti-Mage" + "Outworld Devourer" + "Shadow Demon" + "Techies" + "Ancient Apparition" + "Meepo" + "Riki"
    },
    "Alchemist":{
      "counters": "Riki" + "Ursa" + "Drow" + "Phantom Assassin" + "Troll Warlord" + "Bounty Hunter" + "Slark" + "Lifestealer"
    },
    "Ancient Apparition":{
      "counters": "Anti-Mage" + "Clinkz" + "Riki" + "Juggernaut" + "Zeus" + "Techies" + "Phantom Assassin" + "Spectre"
    },
    "Axe":{
      "counters": "Timbersaw" + "Venomancer" + "Silencer" + "Necrophos" + "Zeus" + "Phoenix" + "Lich" + "Ancient Apparition"
    },
    "Bane":{
      "counters": "Phantom Lancer" + "Chaos Knight" + "Meepo" + "Tidehunter" + "Sand King" + "Razor" + "Naga Siren" + "Undying"
    },
    "Batrider":{
      "counters": "Huskar" + "Viper" + "Juggernaut" + "Sniper" + "Venomancer" + "Undying" + "Weaver" + "Drow Ranger"
    },
    "Beastmaster":{
      "counters": "Axe" + "Bristleback" + "Lich" + "Timbersaw" + "Zeus" + "Meepo" + "Centaur Warrunner" + "Tidehunter"
    },
    "Bloodseeker":{
      "counters": "Wraith King" + "Techies" + "Tiny" + "Troll Warlod" + "Lifestealer" + "Dragon Knight" + "Legion Commander" + "Chaos Knight"
    },
    "Bounty Hunter":{
      "counters": "Phantom Lancer" + "Slardar" + "Meepo" + "Naga Siren" + "Bloodseeker" + "Chaos Knight" + "Huskar" + "Techies"
    },
    "Brewmaster":{
      "counters": "Undying" + "Omniknight" + "Death Prophet" + "Timbersaw" + "Weaver" + "Techies" + "Queen of Pain" + "Anti-Mage"
    },
    "Bristleback":{
      "counters": "Necrophos" + "Venomancer" + "Viper" + "Ancient Apparition" + "Razor" + "Death Prophet" + "Clockwerk" + "Omniknight"
    },


  };


  var keys = [];
  for(var k in heroes) keys.push(k);

    $("#searchBar").autocomplete({
      source: keys
    });

  $( "#searchBar" ).autocomplete({ minLength: 2 });
  var minLength = $( "#searchBar" ).autocomplete( "option", "minLength" );
  $( "#searchBar" ).autocomplete( "option", "minLength", 2 );
  $( "#searchBar" ).autocomplete({ autoFocus: true });
  $( "#searchBar" ).autocomplete({response: function( event, ui ) {} });



  $("#searchBar").bind("keypress", function(e) {
    var key = e.keyCode || e.which;
    if(key == 13) { 
      for (var i = 0; i < heroes.length; i++) {
        if (document.getElementById("searchBar").value == heroes);
        document.getElementById("placeholder").innerHTML = heroes.counters;
      };
    }
  });
});

基本上我要构建的是一个反制英雄列表。我想要实现的是，当我将一个字符串放入输入字段(#searchBar)时，它将通过我的对象运行它并查看它是否匹配，它匹配它将返回值(计数器，但它不起作用。

Answer 1

您没有正确迭代对象字段。

此外，我建议您使用自动完成插件的 select 事件而不是按键

这是工作代码:

  $( "#searchBar" ).autocomplete({select: function( event, ui ) {
        for (var hero in heroes) {
          if (document.getElementById("searchBar").value == hero) {
            document.getElementById("placeholder").innerHTML = heroes[hero].counters;
          }
        };
  } });

http://jsfiddle.net/bo1ce55L/2/