Jquery तीर कुंजी नेविगेशन

Question

मैं autosuggestion की तरह एक 'फेसबुक' के लिए इन पाठ फ़ील्ड और लटकती मेनू है:

<input type="text" id="search" name="search_fld"/> 

<div id="display"> 
<div class="display_box">Luca</div> 
<div class="display_box">David</div> 
<div class="display_box">Mark</div> 
<div class="display_box">...</div> 
</div> 

मेरी सीएसएस

.display_box:hover 
{ 
    background:#3b5998; 
    color:#FFFFFF; 
} 

मैं कैसे प्राप्त कर सकते के साथ 'hover'state पारित करने के लिए नीचे तीर कुंजी मेरे इनपुट "search_fld" से पहले 'display_box' तक और फिर सभी "प्रदर्शन" divs के लिए?

यहाँ jsfiddle

: http://jsfiddle.net/MKZSE/

धन्यवाद लुका

Answer 1

आप मंडराना राज्य पूरी तरह से अनुकरण नहीं कर सकते .. उनमें एक ही शैली के साथ 'असली' वर्ग को जोड़ने से नहीं बच गया है:

.display_box_hover, .display_box:hover 
{ 
    background:#3b5998; 
    color:#FFFFFF; 
} 

अब इस कोड "होगा naviage" तत्वों:

window.displayBoxIndex = -1; 

$("#search").keyup(function(e) 
{ 
     if (e.keyCode == 40) 
     { 
      Navigate(1); 
     } 
     if(e.keyCode==38) 
     { 
      Navigate(-1); 
     } 

}); 

var Navigate = function(diff) { 
    displayBoxIndex += diff; 
    var oBoxCollection = $(".display_box"); 
    if (displayBoxIndex >= oBoxCollection.length) 
     displayBoxIndex = 0; 
    if (displayBoxIndex < 0) 
     displayBoxIndex = oBoxCollection.length - 1; 
    var cssClass = "display_box_hover"; 
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass); 
} 

यह तत्व पिछले "चयनित" के सूचकांक "याद" होगा और अगले या पिछले तत्व के लिए स्विच, eq() समारोह का उपयोग करने और से वर्ग को जोड़ने उस चयनित तत्व के ऊपर।

Updated jsFiddle।

<input list="search" name="search_fld"/> 
    <datalist id="search"> 
    <option value="Luca"/> 
    <option value="David"/> 
    <option value="Mark"/> 
    </datalist> 

अधिक जानकारी के DataList टैग पर यहां से प्राप्त करें::

Answer 2

आप सीएसएस/पृष्ठभूमि तीर छवि के साथ इनपुट क्षेत्र पर एक उपरिशायी अवधि का उपयोग करें और इसे बनाने का उपयोग कर इनपुट क्षेत्र पृष्ठभूमि के रूप में एक तीर कुंजी का उपयोग कर सकते सीएसएस या जेएस

Answer 3

का उपयोग कर होवर राज्य में दिखाई देने वाला यह निश्चित रूप से बदसूरत है। बेवकूफ here पर।

<script src="jquery.js"></script> 

<script> 
$(function(){ 

     $('.display_box').hover(function(){    
      $(this).attr('class', 'display_box current') 
     }, function(){ 
      $(this).attr('class', 'display_box'); 
     }); 

     $('#search').keyup(
      function (e){ 
       var curr = $('#display').find('.current'); 
       if (e.keyCode == 40) 
       {         
        if(curr.length) 
        { 
          $(curr).attr('class', 'display_box'); 
          $(curr).next().attr('class', 'display_box current'); 
        } 
        else{ 
         $('#display div:first-child').attr('class', 'display_box current'); 
        }     
       } 
       if(e.keyCode==38) 
       {          
        if(curr.length) 
        {       
          $(curr).attr('class', 'display_box'); 
          $(curr).prev().attr('class', 'display_box current'); 
        } 
        else{ 
         $('#display div:last-child').attr('class', 'display_box current'); 
        }   
       } 
      }  
     ) 

    }); 
</script> 
<style> 
.current{ 
    background:#3b5998; 
    color:#FFFFFF; 
} 
</style> 

<input type="text" id="search" name="search_fld"/> 
<div id="display"> 
<div class="display_box current">Luca</div> 
<div class="display_box">David</div> 
<div class="display_box">Mark</div> 
<div class="display_box">...</div> 
</div> 

Answer 4

autosuggestion पाठ क्षेत्र को लागू करने के लिए, यह नीचे के रूप में 'DataList' टैग का उपयोग करने के बेहतर होगा के रूप में मुझे http://www.w3schools.com/tags/tag_datalist.asp