SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 39
  1. #1
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question regarding jQuery UI autocomplete

    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!




    Code JavaScript:
    <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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

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

    Code:
    <!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>
    Quote Originally Posted by RedBishop View Post
    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?
    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. #3
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    No probs

    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. #5
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #7
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Sorry, you've lost me.
    Can you post a copy of the code you are working with (or a link)

  9. #9
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

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

    Code JavaScript:
    [HTML]<!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>[/HTML]

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

    autocomplete.JPG

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ah, with you.
    Good news is that it is easy to fix

    Change the select attribute like so:

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

  11. #11
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo,

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

  12. #12
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's still showing the URLs

    The code I'm using:

    HTML Code:
    <!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. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by RedBishop View Post
    It's still showing the URLs
    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. #14
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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.

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Cheers Ralph, that's what happens for me on Win 8.

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

  18. #18
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    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. #19
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #20
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by myty View Post
    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.
    Thanks myty.
    Much cleaner!

  22. #22
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    No problem Pullo.

    For completion sake, the broken behavior you coded is clearly documented: http://api.jqueryui.com/autocomplete/#option-source
    An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

    The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.
    The problem was that using the arrow keys to navigate the autocomplete list means selecting the item too.

  23. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi myty,

    Quote Originally Posted by myty View Post
    For completion sake, the broken behavior you coded is clearly documented: http://api.jqueryui.com/autocomplete/#option-source.
    Yup, I should have read that the docs in more depth first time round
    Anyway, I've been playing around with this and just realized that in addition to label and value properties you can also specify arbitrary other properties (as you have done in your second example with the data property).
    That's a neat trick. Thanks!

  24. #24
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Well, that's pretty much javascript 1on1. The source is an array, of strings or of objects.

    We have the case of an array of objects.
    A JS object can be freely augmented, and the order of properties in an object is not important.

    Thus, adding properties and even methods to the objects in that array is anyone's choice.

  25. #25
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    what's up?

    I am about to try using the autocomplete with data fetched from a database. On the jQuery website I can't really see how the PHP fetches the data. Looking on the Internet I found this website:

    http://burnmind.com/tutorials/how-to...erated-dataset

    Is this more or less how the PHP and JavaScript should look like? Or what would you recommend?


    Thank you in advance!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •