JQuery Autocomplete textbox

Question

How do I implement Autocomplete with JQuery when I click on Textbox with out typing anything. The String[] will return a pre built list.

Answer 1

<pre>'<input type="text"/><div class=displayPanel></div>'</pre>

$jq('input').bind('click', function() {

$jq('.displayPanel').slideDown('slow', function() {

this.text = textarray;

});

});

i don't know if this is what you need but.

Answer 2

Have you tried one of the autocomplete plugins for jQuery?

i.e. http://plugins.jquery.com/project/js-autocomplete, but there are several others.

Answer 3

The autocomplete plugin (http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/) is your best bet, especially if you are in an AJAXy application, since it go off to your server and get a list of possibles in real-time.

Example Usage:

$("#sometextbox").autocomplete("search.php", {
    width: 260,
    selectFirst: false
});

And then search.php might return:

Great Bittern|Botaurus stellaris
Little Bittern|Ixobrychus minutus
American Bittern|Botaurus lentiginosus

You can dynamically generate the output too, because the plugin passes the text entered on the querystring, in the 'q' parameter.

In answer to firing the autocomplete without typing anything, the plugin does not support that, but it would fairly simple to implement in a hackish way:

The plugin hooks onto the keydown (or keypress) event of the box, like so (line 92 of the non-minified code):

$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete",...)

Therefore, you could force the autocompleter to run by doing something like:

$("#autocompletedInput").click(function() {
    $(this).trigger(($.browser.opera ? "keypress" : "keydown") + ".autocomplete");
}

Which should fire the event. You may need to pass a random character keycode into the trigger, so it doesn't wonder what's going on.