CODEWITHSUNDEEP
jqueryautocomplete
Greens
Greens

Reputation: 3057

JQuery Autocomplete textbox

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

Upvotes: 4

Views: 12479

Answers (3)

Alistair Evans
Alistair Evans

Reputation: 36473

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.

Upvotes: 2

Philippe Leybaert
Philippe Leybaert

Reputation: 171734

Have you tried one of the autocomplete plugins for jQuery?

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

Upvotes: 0

user114116
user114116

Reputation: 33

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

Upvotes: 2

Related Questions