Clickable autocomplete, like google

Question

Hello

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!

Answer 1

"but even the author dont know how to make this" ??

I think it is easily done by replacing the message-box alert (in the example page) with a call to form.submit(). I haven't tried it, though.

Edit: Here's some example code using http://dyve.net/jquery/?autocomplete:

$("#mytextbox").autocomplete("form.php", {onItemSelect:submitTheForm});

function submitTheForm(){ 
     // redirect user to whatever URL
}

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
});

Answer 3

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 4

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

if i type "ODE"

it would show "C**ODE**" 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 5

the jQuery Autocomplete plugin has a matchContains option that will search within the result. Set it to true and it will return substring matches as well.

Answer 6

Excelete documento,, he logrado realizar un control autocomplete y al seleccionar algún item lo envia a una url correctamente.

Exitos y saludos.

Adjunto el código de como quedo.

<script language="javascript" type="text/javascript">

 $().ready(function () {
     var dataOpciones = "<%=ListadoOpciones()%>".split(",");
     $("#Opciones").autocomplete(dataOpciones, {
         selectFirst: false,
         minChars: 0,
         formatItem: function (data, i, n, value) {
             var texto = data[0].split("::");
             return texto[0];
         },
         formatResult: function (data, value) {
             var texto = data[0].split("::");
             return texto[0];
         }
     }).result(function (event, data, formatted) {
         //redirect to the URL in the string 
         var pieces = data[0].split("::");
         window.location.href = "<%=webSitePath%>/" + pieces[1];
     });
 });
</script>