Display jquery ui auto-complete list on focus event
JqueryJquery Problem Overview
here is my code, anything wrong with it ? it doesn't seem to display list on focus, i still have to press a key before it displays list
<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">
Jquery Solutions
Solution 1 - Jquery
This directly call search method with default value when focus.
http://jsfiddle.net/steelywing/ubugC/
$("input").autocomplete({
source: ["Apple", "Boy", "Cat"],
minLength: 0,
}).focus(function () {
$(this).autocomplete("search");
});
Solution 2 - Jquery
Looks like you are attaching your focus()
handler to the anonymous function and not the text box.
Try this:
<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>
Solution 3 - Jquery
The solution to make it work more than once
<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>
Solution 4 - Jquery
digitalPBK almost has it right...
His solution works more than once but doesn't close the drop list when you select an item from the list with a mouse-click. In that case, the focus goes back to the control when you do the click, so it re-opens the list when it should be closing it.
Here's a fix, and it's the only that works for me the way I think it should work when using the latest version right now (1.8.11) of the autocomplete() function. When the control receives the focus, it doesn't do the display-all-on-focus if the drop-list is already shown...
<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>
Solution 5 - Jquery
$(this).trigger('keydown.autocomplete');
doesn't quite work for me.
This is what I did:
$('#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
});
Solution 6 - Jquery
With more recent versions you might need to change autocomplete to uiAutocomplete
$(this).data("uiAutocomplete").search($(this).val());
Solution 7 - Jquery
If you want to change something about jQuery UI, do it jQuery UI way.
Utilize jQuery UI Widget Factory. It's easier to maintain, faster, and much cleaner than attaching events to element.
$.widget('custom.autocomplete', $.ui.autocomplete, {
options: {
minLength: 0
},
_create: function() {
this._on(this.element, {
focus: function(event) {
this.search();
}
});
this._super();
}
});
Solution 8 - Jquery
The generic purpose of AutoComplete is to execute on key press and based on the Letter we type it will perform often a wild-card search and show the result.
Anyway, from the code above i can see that :
focus(function(){
$(this).trigger('keydown.autocomplete');
which is attached as told by Codesleuth, to the anonymous function instead of the Control.
Solution 9 - Jquery
This working right way.
$.widget('custom.autocomplete', $.ui.autocomplete, {
options: {
minLength: 0
},
_create: function() {
this._on(this.element, {
focus: function(event) {
this.search();
}
});
this._super();
}
});