सूची तत्व का चयन (नीचे कब्जा/ऊपर तीर)

Question

मैं HTML संरचना ('उल ली' ड्रॉप-डाउन के रूप में प्रदान कर रहे हैं/चुनें) निम्नलिखित है

<input id="input_city" type="text" /> 

<div class="suggestions"> 
<ul> 
    <li value="0" name="New York">New York</li> 
    <li value="1" name="London">London</li> 
    <li value="2" name="Paris">Paris</li> 
    <li value="3" name="Sydney">Sydney</li> 
</ul> 
</div> 

तीर कुंजी प्रेस नीचे कब्जा करने के लिए जावास्क्रिप्ट/jQuery कोड की आवश्यकता घटना (इनपुट पर) जो पहले 'ली' तत्व का चयन करेगी

अभिसरण नीचे कुंजी अगले 'li' तत्वों का चयन करें; और ऊपर कुंजी पिछले 'ली' तत्वों का चयन करें।

Answer 1

आप इसके लिए MousetrapJS का उपयोग कर सकते हैं। यहां एक उदाहरण है कि आप नीचे की कुंजी को कैसे कार्यान्वित कर सकते हैं। पहले प्रथम सूची आइटम में चयनित कक्षा को जोड़ें।

Mousetrap.bind('down', function() { 
    var next = $(".suggestions li.selected").removeClass("selected").next(); 
    if (next.length) { 
     next.addClass("selected"); 
    } else { 
     $(".suggestions li").first().addClass("selected"); 
    } 
}); 

Answer 2

चूंकि आपका प्रश्न थोड़ा अस्पष्ट है, यह बिल्कुल स्पष्ट नहीं है कि आप क्या करने की कोशिश कर रहे हैं।

आप li तत्वों को उजागर करने की कोशिश कर रहे हैं, यह का उपयोग करें:

var $listItems = $('li'); 

$('input').keydown(function(e) 
{ 
    var key = e.keyCode, 
     $selected = $listItems.filter('.selected'), 
     $current; 

    if (key != 40 && key != 38) return; 

    $listItems.removeClass('selected'); 

    if (key == 40) // Down key 
    { 
     if (! $selected.length || $selected.is(':last-child')) { 
      $current = $listItems.eq(0); 
     } 
     else { 
      $current = $selected.next(); 
     } 
    } 
    else if (key == 38) // Up key 
    { 
     if (! $selected.length || $selected.is(':first-child')) { 
      $current = $listItems.last(); 
     } 
     else { 
      $current = $selected.prev(); 
     } 
    } 

    $current.addClass('selected'); 
});​ 

यहाँ बेला है: http://jsfiddle.net/GSKpT/

---

आप बस अपने input का मान सेट करने की कोशिश कर रहे हैं फ़ील्ड, इस पर अंतिम पंक्ति बदलें:

$(this).val ($current.addClass('selected').text()); 

यहां पहेली है: http://jsfiddle.net/GSKpT/1/