Jquery स्वतः पूर्ण: पहले आइटम का चयन करने के लिए टैब का उपयोग करके और खोज बॉक्स पर ध्यान केंद्रित करें

Question

जब मैं JQuery UI स्वत: पूर्णता का उपयोग करता हूं, तो मुझे टैब कुंजी कुंजी स्वत: पूर्ण परिणामों में पहले आइटम के साथ खोज बॉक्स को पॉप्युलेट करने की आवश्यकता होती है, बाद में एक स्थान शामिल करें , फिर उपयोगकर्ता को टाइपिंग जारी रखने की अनुमति देता है।

<div class="ui-widget"> 
    <form id="searchbox" method="GET" action="http://duckduckgo.com/"> 
    <input id="search" type="text" name="q"> 
    <input id="submit" type="submit" value="Search"> 
    </form> 
</div> 
<script> 
var tabKey = 9; 
$('#search').autocomplete({ 
    source: [ 'this', 'that', 'foobar' ], 
    delay: 0, 
    selectFirst: true, 
    select: function(event, ui) { if (event.keyCode == tabKey) { 
     $('#search').focus().select(); 
    } } 
}); 
// without this, the tab key doesn't trigger an event                      
$('.ui-autocomplete').keypress(function(event) {}); 
</script> 

दूसरे शब्दों में, ऊपर के उदाहरण में, अगर कोई "वें" आपके द्वारा लिखा गया है, वे देखना चाहते हैं "इस" और "है कि" स्वत: पूर्ण विकल्प में। टैब मारने से इनपुट में "यह" (स्पेस नोट) जोड़ दिया जाएगा और इनपुट में फोकस रहेगा।

क्या कोई मुझे एक पॉइंटर दे सकता है जो मैंने याद किया है? मैं जावास्क्रिप्ट बहुत अच्छी तरह से पता नहीं है, इतना छोटा शब्द अच्छा :)

और शायद अधिक उपयोगी जानकारी (jQuery 1.7.2) HEAD अनुभाग से कर रहे हैं:

<script src="js/jquery-latest.js"></script> 
<script src="js/jquery-ui-1.8.20.custom.min.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.20.custom.css" /> 

संपादित: ऐसा नहीं है कि प्रतीत होता है autoFocus: true मुझे वहां भाग लेगा। अब अगर मैं सिर्फ इनपुट बॉक्स पर ध्यान केंद्रित करने का तरीका समझ सकता हूं।

Answer 1

हिया डेमोhttp://jsfiddle.net/DMDHC/

आशा इस मदद करता है, :)

तो अगर आप टाइप Ra आप रेम्बो और अन्य विकल्पों अप पॉपिंग और फिर tab कुंजी हिट और आप उस added text + " " दिखाई देंगी देखेंगे टेक्स्ट बॉक्स पर ध्यान केंद्रित करने के साथ ताकि आप टाइपिंग रख सकें।

एक और चीज मैंने किया है event.preventDefault(); जो किसी भी डिफ़ॉल्ट व्यवहार को रोक देगा, आपको पता है कि आप ब्रूव क्या कर रहे हैं! B-)

jQuery कोड

$("#search").autocomplete({ 
    source: function(req, resp) { 
     $.post("/echo/json/", { 
      json: '["Rambo", "Foobar", "This", "That", "Batman", "Hulk"]', 
      delay: 1 
     }, function(data) { 
      resp(data); 
     }, "JSON"); 
    }, 
     select: function(event, ui) { 

      var TABKEY = 9; 
      this.value = ui.item.value; 

      if (event.keyCode == TABKEY) { 
       event.preventDefault(); 
       this.value = this.value + " "; 
       $('#search').focus(); 
      } 

      return false; 
     } 
}); 

​ 

Answer 2

मैं इस (coffeescript का उपयोग करें):

$("#autocomplete").keydown (event) -> 
    if event.keyCode != $.ui.keyCode.TAB then return true 
    $(this).trigger($.Event 'keydown', keyCode: $.ui.keyCode.DOWN) 
    false