SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQeury Autocomplete - show all results

    Hello Guys,

    this is my first post, I found this code very useful, I was wondering if there is a possibility to add a button to show all the results

    thanks for your help
    have a nice day

    Solidus

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>jQuery UI Autocomplete Testt</title>
    <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() {
    var data = [
    {label: 'Google', value: 'http://google.com'},
    {label: 'Yahoo', value: 'http://yahoo.com'},
    {label: 'BMW', value: 'http://bmw.com'},
    {label: 'Bing', value: 'http://bing.com'}
    ];

    $("input#autocomplete").autocomplete({
    source: data,
    focus: function (event, ui) {
    $(event.target).val(ui.item.label);
    return false;
    },
    select: function (event, ui) {
    $(event.target).val(ui.item.label);
    window.location = ui.item.value;
    return false;
    }
    });
    });
    </script>
    </head>
    <body>
    <input id="autocomplete" />
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by solidus.it View Post
    I found this code very useful, I was wondering if there is a possibility to add a button to show all the results
    Yes there is.

    The autocomplete documentation shows in the Options section that there's a minLength setting, which says:

    The minimum number of characters a user has to type before the Autocomplete activates. Zero is useful for local data with just a few items. Should be increased when there are a lot of items, where a single character would match a few thousand items.
    That can be used with something from the Methods section of the documentation called search, which says:

    Triggers a search event, which, when data is available, then will display the suggestions; can be used by a selectbox-like button to open the suggestions when clicked. If no value argument is specified, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your quick answer,
    I also thought that, unfortunately my knowledge in javascript is very poor,
    can you show me a sample how to add a button, to call the procedure to show all results?

    thanks
    Solidus

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by solidus.it View Post
    thanks for your quick answer,
    I also thought that, unfortunately my knowledge in javascript is very poor,
    can you show me a sample how to add a button, to call the procedure to show all results?
    An example, after you've already initialised the autocomplete with a minLength of 0, might be something like:

    HTML Code:
    <button id="showall">Show all</button>
    Code javascript:
    $('#showall').on('click', function () {
        $('#autocomplete').autocomplete('search' , '');
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks,
    I changed the minLength to 0, but the example dows not work, this is the html example, it seems all right, but I cannot understand the problem:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>jQuery UI Autocomplete Testt</title>
    <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() {
    var data = [
    {label: 'Google', value: 'http://google.com'},
    {label: 'Yahoo', value: 'http://yahoo.com'},
    {label: 'BMW', value: 'http://bmw.com'},
    {label: 'Bing', value: 'http://bing.com'}
    ];

    $("input#autocomplete").autocomplete({
    source: data,
    focus: function (event, ui) {
    $(event.target).val(ui.item.label);
    return false;
    },
    select: function (event, ui) {
    $(event.target).val(ui.item.label);
    window.location = ui.item.value;
    return false;
    }
    });
    });


    $('#showall').on('click', function () {
    $('.selector').autocomplete('search' , '');
    });
    </script>
    </head>
    <body>
    <input id="autocomplete" /><button id="showall">Show all</button>
    </body>
    </html>
    thanks for your time

    Solidus

  6. #6
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, just changed the "$('.selector')." with "$("input#autocomplete")" and it works

    one last think, how Can I toogle the button to open/close the menu???

    thanks
    Solidus

  7. #7
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    found the solution by myself, if anybody need a very useful script like this, this is the final code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>jQuery UI Autocomplete Testt</title>
    <link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    <script>
    $(document).ready(function() {
    var data = [
    {label: 'Google', value: 'http://google.com'},
    {label: 'Yahoo', value: 'http://yahoo.com'},
    {label: 'BMW', value: 'http://bmw.com'},
    {label: 'Bing', value: 'http://bing.com'}
    ];

    $("input#autocomplete").autocomplete({
    source: data,
    focus: function (event, ui) {
    $(event.target).val(ui.item.label);
    return false;
    },
    select: function (event, ui) {
    $(event.target).val(ui.item.label);
    window.location = ui.item.value;
    return false;
    }
    });


    $('#showall').on('click', function () {

    if ( $("input#autocomplete").autocomplete( "widget" ).is( ":visible" ) ) {
    $("input#autocomplete").autocomplete( "close" );
    return;
    }
    $( this ).blur();
    $("input#autocomplete").autocomplete('search' , '');
    $("input#autocomplete").focus();

    });


    });

    </script>
    </head>
    <body>
    <input id="autocomplete" /><button id="showall">Show all</button>
    </body>
    </html>
    Solidus


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
  •