Jquery otomatik tamamlama: birinci öğeyi seçmek için arama sekmesini kullanma ve arama kutusuna odakta kalmasını sağla

Question

JQuery UI otomatik tamamla özelliğini kullandığımda, sekme anahtarının otomatik tamamlama sonuçlarındaki ilk öğeyle arama kutusunu doldurması gerekir, daha sonra bir boşluk ekleyin Daha sonra kullanıcının yazmaya devam etmesine izin ver. Birisi "th" Yazılan Diğer bir deyişle

<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> 

, yukarıdaki örnekte, bunlar görürdük "bu" ve "o" otomatik tamamlama seçimlerinde. Vurgulama sekmesi, girdiyi "bu" (boşluk) not eder ve girişte odak kalır.

Birisi bana neyi özlediğimi gösteren bir işaretçi verebilir mi?

<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" /> 

Düzenleme: Çok küçük kelime BAŞ bölümünden iyi :)

Ve belki daha yararlı bilgiler

(jquery 1.7.2) olan, çok iyi Javascript bilmiyorsanız O autoFocus: true anlaşılıyor Beni oraya götürürüm. Şimdi, giriş kutusuna odaklanmayı nasıl durduracağımı anlayabilirsem.

Answer 1

Selam demo bu yardımcı olurhttp://jsfiddle.net/DMDHC/

Umut, :) sen Ra yazarsanız size rambo ve diğer seçenekler gelmeyip ve sonra tab tuşuna basın ve added text + " " görüneceğini göreceksiniz göreceksiniz Yani

Yazmaya devam edebilmeniz için metin kutusuna odaklanın.

Yaptığım bir diğer şey, herhangi bir varsayılan davranışı engelleyecek event.preventDefault();'dur, ne yaptığınızı bildiğinize emin olun bruv! B-)

jquery kodu

$("#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

Bu (CoffeeScript kullanın): mükemmel

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