Question regarding jQuery UI autocomplete

JavaScript
1

Hi Pullo and everyone else,

I’m still battling to implement jQuery UI autocomplete.

I’d like the tags? to load the appropriate page upon selection by the user. I found the following code but it also doesn’t work. What must I change? Any tag/label would have to be associated with a corresponding value/URL - right? Once I get the autocomplete going, I’d like to populate it with items from a database.

Also, in your opinion, is jQuery UI autocomplete the best option or are there other ones you can recommend?

Any help will be appreciated! I’ve spent too much time trying to get the autocomplete to do something. Other jQUERY UI plugins were easy enough to implement. Thank you!

<script>
  var source = [ { value: "www.foo.com",
                 label: "Asp"
               },
                            ];


  $(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: source,
        select: function( event, ui ) {
            window.location.href = ui.item.value;
        }
    });
});

$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
2

Hi there,

Here’s a very simple example which does what you want:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    $(function() {
      var availableTags = [
      { label: "Sitepoint", value: "http://www.sitepoint.com" },
      { label: "Youtube", value: "http://www.youtube.com" },
      { label: "Twitter", value: "http://www.twitter.com" },
      { label: "Facebook", value: "http://www.facebook.com" }
      ];
      $( "#tags" ).autocomplete({
        source: availableTags,
        select: function( event, ui ) { 
          window.location.href = ui.item.value;
        }
      });
    });
    </script>
  </head>
  <body>
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags" />
    </div>
  </body>
</html>

I’d recommend staying with jQuery UI.
Sure there are other ways to do this, ranging from writing it yourself to various other plugins, but I like jQuery UI and it is well supported.

You can do the database population easily enough. Here’s a demo: http://jqueryui.com/autocomplete/#remote

HTH

3

Hi Pullo,

thank you very much for the info and the link! It’s finally working.

The one thing I need to figure out is how to hide the URLs so that they aren’t visible in the autocomplete itself. All of my links will be for pages on the same website.

Thanks again for your help.

4

Hi,

No probs :slight_smile:

In the example I posted the URLs shouldn’t be visible in the autocomplete, only the tags (you specify as labels) should be visible.
If you want to navigate to somewhere within the same site, just lose the “http://”

Other than that, if you have any questions, then it would help if you could post the code you are working with or a link to a page where we can see it.

5

Hi again Pullo,

thanks for replying so quickly.

I’ve copied your code to a new HTML document and tested it in Firefox. If I enter Facebook (as an example), the autocomplete then shows the term Facebook in a box below the term that I entered. To navigate to Facebook I then need to select/highlight that bottom term. Once I do that, the top term changes into the Facebook URL.

6

Ok, well that’s actually what’s meant to happen.
Did you want something different to take place?

Edit:

By top term I’m guessing you mean the address in the address bar, but maybe that’s not the case.

7

Hi,

if possible I’d like the top term to just stay as it is - only show the term and not the full URL.

8

Sorry, you’ve lost me.
Can you post a copy of the code you are working with (or a link)

9

Hi Pullo,

sorry for the trouble. The code I’m using is the code that you provided:


```html
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;jQuery UI Autocomplete - Default functionality&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $(function() {
      var availableTags = [
      { label: "Sitepoint", value: "http://www.sitepoint.com" },
      { label: "Youtube", value: "http://www.youtube.com" },
      { label: "Twitter", value: "http://www.twitter.com" },
      { label: "Facebook", value: "http://www.facebook.com" }
      ];
      $( "#tags" ).autocomplete({
        source: availableTags,
        select: function( event, ui ) {
          window.location.href = ui.item.value;
        }
      });
    });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="ui-widget"&gt;
      &lt;label for="tags"&gt;Tags: &lt;/label&gt;
      &lt;input id="tags" /&gt;
    &lt;/div&gt;



I've attached an image. The URL appears in the autocomplete itself, however, I'd prefer to only have the name (e.g., Facebook).
10

Ah, with you.
Good news is that it is easy to fix :slight_smile:

Change the select attribute like so:

select: function( event, ui ) {
  $(this).val(ui.item.label);
  window.location.href = ui.item.value;
  event.preventDefault();
}
11

Thanks Pullo,

I will test the code later and sorry for all the hassle - I should have been a bit clearer :).

12

It’s still showing the URLs :frowning:

The code I’m using:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    $(function() {
      var availableTags = [
      { label: "Sitepoint", value: "http://www.sitepoint.com" },
      { label: "Youtube", value: "http://www.youtube.com" },
      { label: "Twitter", value: "http://www.twitter.com" },
      { label: "Facebook", value: "http://www.facebook.com" }
      ];
      $( "#tags" ).autocomplete({
        source: availableTags,
        select: function( event, ui ) {
  $(this).val(ui.item.label);
  window.location.href = ui.item.value;
  event.preventDefault();
}
      });
    });
    </script>
  </head>
  <body>
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags" />
    </div>
  </body>
</html>
13

Really?
I just copied and pasted the code from your previous post into a file on my PC and ran.
It worked as expected (i.e. when you select Facebook from the box under the text input, then the value of the text input is set to Facebook (not the url), then the page redirects to facebook.com.

Two things come to mind: caching and browser.
It’s unlikely, but try clearing your cache and see if that helps.
If it doesn’t, could you let me know which browser you are using and which OS.

14

Hi Pullo,

I tested it in the latest versions of Firefox, Opera and IE, and also cleared the cache of the respective browsers. The OS I’m using is Windows7 Home Premium. The autocomplete text input always displays the URL.

15

That is weird.
I’m on Windows 8 and it works as previously described in the latest FF, Chrome, IE and Opera.

I made a fiddle so that it is easier for others to try.

@ralph_m ;
Could you do me a favour and try it out.
If you enter “s” into the text input, you should see “Sitepoint”, “RubySource” and “PHP Master” suggested.
If you then select “Sitepoint” from the list, do you see the url (http://sitepoint.com) or the label (Sitepoint) displayed in the text box before being redirected?

16

In the Mac versions of Chrome, Firefox, Opera and Safari, the behavior is the same: typing “s” produces the drop list of three items as suggested above, and clicking Sitepoint results in the Word “Sitepoint” appearing in the text box before the page is redirected to the SP home page. :slight_smile:

17

Cheers Ralph, that’s what happens for me on Win 8.

RedBishop, could you maybe try it on another computer or device?

18

Actually, I think the OP means normal item selection, using the arrow keys, not the mouse click. You’ll see then that the functionality is broken because it places in the value, not the label.

Try this using the arrow keys: http://jsfiddle.net/rVAjU/2/

Of course, you can omit all but the redirect from the select event: http://jsfiddle.net/rVAjU/3/

19

Hi everyone,

thanks to all for helping me with the autocomplete! It appears that there’s a difference between using the keyboard (the URL displays in the text input) and the mouse (the label displays in the text input) to select the item from the drop list.

I tried the first fiddle provided by myty and the label displays in the text input using either the mouse or the keyboard.

20

The last one of my jsfiddles is the one you should consider.
It has the bare code necessary for you.

As for the difference, the difference is in the code, Pullo’s and mine.
I amended Pullo’s code since:

  • he was misusing the value purpose with the object initialization.
  • with the first part of the code for the select method, he was trying to duplicate a feature already in place.