Scriptaculous Autocomplete trigger search without typing

Posted on 2007-10-02
Last Modified: 2008-01-09
Hi I am using Scriptaculous' Autocompleter. I want the autocomplete text box to also act like a drop down. So right now when i type something it displays a list of matches (suggestions) and i can cursor down to select whatever i see fit. I want to be able to click on the text box and display the FULL list of results without having to type in some text first.

Anyone know how?
Question by:TonyTone1
    LVL 7

    Expert Comment

    You just need to create a function that triggers your element onFocus of the text input. Then all you have to do is pre-populate your autocomplete element with everything you want the user to see if it's blank.

    Author Comment

    Yes, I understand  the theory, I was looking as to something more practicle, like a code sample.
    LVL 7

    Accepted Solution

    Without seeing how your autocompleter updates, the most basic example I can give you is:

    ////// javascript //////
    function updateCompleter(){
          var inputValue = encodeURIComponent($('box').value);
          new Ajax.Updater('autocompleter','ac.php',{parameters:'box='+inputValue, onComplete:function(){'autocompleter');}});

    ////// html //////
    <input type="text" id="box" name="box" onfocus="updateCompleter();" /><input type="submit" value="go" />
    <div id="autocompleter"></div>

    you would just need to make sure that your autocompleter page allows for a blank post value, and displays all items.

    Personally, I think there are better ways to do "auto-complete" with scriptaculous than using Ajax.Autocompleter. Seems like there's a lot of issues with functionality.
    LVL 1

    Expert Comment

    Forced accept.

    EE Admin

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
    In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now