顯示焦點事件jquery ui自動完成列表

Question

這裏是我的代碼，它有什麼不對嗎？ 它似乎並沒有顯示在關注名單，我還是得按一個鍵就顯示列表

<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
    $(function() { 
     $('#id').autocomplete({ 
      source: ["ActionScript", 
         "AppleScript", 
         "Asp", 
         "BASIC", 
         "C", 
         "C++", 
         "Clojure", 
         "COBOL", 
         "ColdFusion", 
         "Erlang", 
         "Fortran", 
         "Groovy", 
         "Haskell", 
         "Java", 
         "JavaScript", 
         "Lisp", 
         "Perl", 
         "PHP", 
         "Python", 
         "Ruby", 
         "Scala", 
         "Scheme" 
        ], 
      minLength: 0 
     }); 
    }).focus(function(){    
      $(this).trigger('keydown.autocomplete'); 
    }); 
</script> 


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

Answer 1

看起來要連接您的focus()處理程序，以匿名函數，而不是文本框之前。

試試這個：

<script type="text/javascript"> 
    $(function() { 
     $('#id').autocomplete({ 
      source: ["ActionScript", 
         /* ... */ 
        ], 
      minLength: 0 
     }).focus(function(){    
      // The following works only once. 
      // $(this).trigger('keydown.autocomplete'); 
      // As suggested by digitalPBK, works multiple times 
      // $(this).data("autocomplete").search($(this).val()); 
      // As noted by Jonny in his answer, with newer versions use uiAutocomplete 
      $(this).data("uiAutocomplete").search($(this).val()); 
     }); 
    }); 
</script> 

Answer 2

自動完成的一般目的是基於我們鍵入它通常會執行一個通配符搜索和顯示結果的字母執行的按鍵和。

無論如何，從上面的代碼我可以看到：

焦點（函數（）{
$（本）.trigger（ 'keydown.autocomplete'）;已列爲告訴

通過Codesleuth，以

Answer 3

該解決方案的匿名函數，而不是控制。使其工作不止一次

<script type="text/javascript"> 
    $(function() { 
     $('#id').autocomplete({ 
      source: ["ActionScript", 
         /* ... */ 
        ], 
      minLength: 0 
     }).focus(function(){  
      //Use the below line instead of triggering keydown 
      $(this).data("autocomplete").search($(this).val()); 
     }); 
    }); 
</script> 

Answer 4

digitalPBK幾乎沒錯...

他的解決方案不止一次地工作，但是當您用鼠標單擊從列表中選擇一個項目時，它不會關閉下拉列表。在這種情況下，當您執行點擊操作時，焦點會返回到控件，因此應在關閉時重新打開列表。

這是一個修復程序，它是唯一一個適用於我的方式，我認爲它應該在使用autocomplete（）函數的最新版本（1.8.11）時起作用。當控制接收焦點，它不這樣做顯示，所有的焦點似乎已經顯示在下拉列表...

<script type="text/javascript"> 
    $(function() { 
     $('#id').autocomplete({ 
      source: ["ActionScript", 
         /* ... */ 
        ], 
      minLength: 0 
     }).focus(function() { 
      if ($(this).autocomplete("widget").is(":visible")) { 
       return; 
      } 
      $(this).data("autocomplete").search($(this).val()); 
     }); 
</script> 

Answer 5

這直接當焦點調用搜索方法的默認值。

http://jsfiddle.net/steelywing/ubugC/

$("input").autocomplete({ 
    source: ["Apple", "Boy", "Cat"], 
    minLength: 0, 
}).focus(function() { 
    $(this).autocomplete("search"); 
}); 

Answer 6

$(this).trigger('keydown.autocomplete');完全不是那麼回事了我。

這是我做過什麼：

$('#id').on("focus", function(event, ui) { 
    $(this).trigger(jQuery.Event("keydown")); 
    // Since I know keydown opens the menu, might as well fire a keydown event to the element 
}); 

Answer 7

如果你想改變一些關於jQuery UI的，做jQuery UI的方式。

利用jQuery UI Widget Factory。與將事件附加到元素相比，維護更容易，速度更快，並且更加乾淨。

$.widget('custom.autocomplete', $.ui.autocomplete, { 
    options: { 
    minLength: 0 
    }, 
    _create: function() { 
    this._on(this.element, { 
     focus: function(event) { 
     this.search(); 
     } 
    }); 

    this._super(); 
    } 
}); 

Answer 8

對於較新的版本中，你可能需要更改自動完成uiAutocomplete

$(this).data("uiAutocomplete").search($(this).val()); 

Answer 9

該工作正確的方式。

$.widget('custom.autocomplete', $.ui.autocomplete, { 
    options: { 
    minLength: 0 
    }, 
    _create: function() { 
    this._on(this.element, { 
     focus: function(event) { 
     this.search(); 
     } 
    }); 

    this._super(); 
    } 
});