Clickable autocomplete, like google

Question

I'm looking for an autocomplete that have no "submit" button, but that when the user click on the autocomplete keyword he would be redirected to another URL, that i will choose

i'm using http://dyve.net/jquery/?autocomplete and i would like to implement in this script, not use any other (because if i type ODE in this one, he shows CODE and also ODESSA)

example:

user type "goo" then appears GOOGLE for him, when he click on GOOGLE the script send him to www.google.com (like "Google"=>"http://www.google.com")

it would be great if i could just do with the script i told you guys i'm not a programmer so i need like, the code itself, i know its too much to ask but i tried everything =\

thank you!

---

the problem at jUI autocomplete is that i want to do this:

if i type "ODE"

it would show "CODE" and also "ODESSA"

not only by the start, thats why i'm trying to use your code in that other one

also, when i used Russ's and karim79's code, it didnt work

Answer 1

I implemented something like that, however, my implementation makes use of jQuery UI Autocomplete.

I use a simple trick, whereby the data returned from the server is a set of strings separated by a newline character "\n", on each line there is a string with the format suggestion::url. On the client, I simply split at the separator (I use ::) and extract the suggestion from the first offset of the resulting array, and the URL from the second. Example:

    $("#search").autocomplete("/some/page", {
        selectFirst: false,
        formatItem: function(data, i, n, value) {
            //make the suggestion look nice
            return "<font color='#3399CC'>" + value.split("::")[0] + "</font>";
        },
        formatResult: function(data,value) {
            //only show the suggestions and not the URLs in the list
            return value.split("::")[0];
        }
    }).result(function(event, data, formatted) {
        //redirect to the URL in the string
        var pieces = formatted.split("::");
        window.location.href = pieces[1];
    });

To clarify what I mean, suppose you type 'goo'. The server might return:

google::www.google.com\ngoodstuff::www.example.com

That user will see a list appear with 'google' and 'goodstuff'. Clicking on one of those will execute the result method of Autocomplete, where I simply take the URL part of the string and redirect. Hope that helps.

Answer 2

Here's a complete walkthrough on how to build an autocomplete search.

Essentially, you need to have an event handler to call

window.location.href = "your-url-string.com";

upon pressing enter or clicking upon a selection.

EDIT:

From the autocomplete documentation

Search Page Replacement

An autocomplete plugin can be used to search for a term and redirect to a page associated with a resulting item. The following is one way to achieve the redirect:

var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
  formatItem: function(item) {
    return item.text;
  }
}).result(function(event, item) {
  location.href = item.url; // navigate to the chosen URL
});