2014-11-11 2 views
1
$ (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)에 넣을 때 내 객체를 통해이를 실행하고 일치하는지 확인합니다. 일치하면 값 (카운터)이 반환됩니다. 하지만 작동하지 않습니다. 나는 이걸 처음 접했을 때부터 맨손으로 벗었습니다. 그리고 완벽하게 작동하는 자동 완성 UI를 사용했지만 마지막 부분 인 래치 업하려고했습니다!내 입력 필드의 키를 json 객체와 일치

+0

이 jsfiddle 제공을 – LorDex

+0

http://jsfiddle.net/bo1ce55L/ @LorDex – DACA92

+0

나는 e.which를 입력합니다. 그래서 내가 입력 할 때마다 문자열이 검색 창에있는 키와 일치 할 때마다 카운터가 표시됩니다. 하지만 작동하지 않습니다. – DACA92

답변

2

개체 필드를 올바르게 반복하지 않습니다. 또한

난 당신이 코드 일하고 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/

+0

도움 사람에게 감사드립니다! 마침내! '영웅의 영웅 (var hero)'에 대해 어떻게 설명 할 수 있습니까? – DACA92

+0

물론, 이전에 이미 설명 했으므로이 내용을 확인하십시오. http://stackoverflow.com/q/7241878/2234089 – Roman

+0

thanks dude. 정말 감사! – DACA92