Click here to Skip to main content
15,881,687 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have been using this example to test a jQuery autocomplete textbox, which works fine.
The problem is the suggestion list only popup when I write something on the textbox. When the textbox become empty then popup list is also become invisible. But I need it to work like this, when the textbox is empty and cursor focus on the textbox then all suggestion entry or top 10 entry will be visible on the autocomplete textbox.

Thanks in advance, your help is greatly appreciated.
Sazzad
Posted
Updated 13-Mar-15 4:29am
v2

1 solution

Hi,

If you check out the api documentation[^] for the autocomplete widget, it explains how to use the minLength option.

If you set the minLength option to zero, then the suggestion list should be displayed.

[quote]
The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.
[/quote]

... updated to add updated usage example (based on the jQuery example[^]):
JavaScript
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags,
minLength: 0
});
});
</script>
</head>
<body>

<label for="tags">Tags: </label>
<input id="tags">


... hope it helps.
 
Share this answer
 
v2
Comments
Thanks7872 13-Mar-15 10:48am    
In addition to that, $(this).autocomplete("search", "") will also be helpful on click of the textbox. Some customisation may be required from OP in order to display first N results.
hypermellow 13-Mar-15 11:00am    
Hi, yes customisation to display the 1st N results would be helpful. It's difficult to suggest appropriate until we know the type of source data he's using. :)
sazzad37 13-Mar-15 10:54am    
I think you give me the correct solution, but I am very new in jQuery :(. Can you please give the complete jQuery code. I don't understand where I should add this code.
hypermellow 13-Mar-15 11:05am    
Hi,I've updated my solution to show you how to use the minLength object. The example is based on the jQuery example.
sazzad37 13-Mar-15 11:07am    
Thank you very much.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900