31

I am trying to create a JQuery Autocomplete box where the words being suggested for autcomplete are links (similar to what happens on Facebook or Quora).

Basically, I want the autocomplete results to drop down and I want people to be able to click on them and be navigated to a different page. Here is the code I am currently using

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("input#autocomplete").autocomplete({
    source: ["Spencer Kline", "Test Test Test Test Test Test Test Test Test", "php", "coldfusion", "javascript", "asp", "ruby"]
});
  });
  </script>
</head>
<body style="font-size:62.5%;">

<input id="autocomplete" />

</body>
</html>
Spencer
  • 21,348
  • 34
  • 85
  • 121

1 Answers1

75

This is simple. Change your source to an array of objects, such as:

var source = [ { value: "www.foo.com",
                 label: "Spencer Kline"
               },
               { value: "www.example.com",
                 label: "James Bond"
               },
               ...
             ];

The just use the select method to redirect to the 'value', e.g.:

$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: source,
        select: function( event, ui ) { 
            window.location.href = ui.item.value;
        }
    });
});
Mike
  • 117
  • 1
  • 4
  • 12
karim79
  • 339,989
  • 67
  • 413
  • 406
  • I am new to JQuery, where would I place the redirect statement in the code? – Spencer Dec 27 '10 at 00:57
  • @Spencer - I've just added a fiddle. That should make it clear. – karim79 Dec 27 '10 at 00:59
  • Thanks I really appreciate it. However, I am such a newbie that I can't get it work. I place the JQuery stuff in the and the HTML stuff in the . Is there anything else I have to do? – Spencer Dec 27 '10 at 01:09
  • Also will this allow me to link to HTML pages on my local host? – Spencer Dec 27 '10 at 01:11
  • @Spencer - yes it will. Do you have a link to your test site? I would suggest working through this yourself until you get it (the hard way - ugh :) Also, you *are* talking about jQuery UI Autocomplete, right? – karim79 Dec 27 '10 at 01:16
  • 2
    Just what I was looking for. I didn't change the source, and changed the select to: `window.location.href = "/search.php?keyword="+ui.item.value;` – Henry Nov 19 '12 at 01:46
  • also, to measure if autocomplete suggestions are actually used, I added an index to the url: `?keyword="+ui.item.value+"&suggest="+ui.item.index`. Server logs can be searched later for urls with the `suggest` parameter. – Henry Nov 19 '12 at 03:23
  • a supplementary question: is it possible to force the user not to enter anything other than the selection offered with this code – bklups Mar 05 '13 at 16:31
  • I had to use `window.location.pathname` to get consistent behavior across all my app's pages. – Steve Jul 28 '15 at 20:34
  • 1
    Is it possible to do it without jQuery, using only datalist attribute?? – Henrique Barcelos Mar 11 '16 at 12:51