Show All option for results

Ashish's Avatar

Ashish

14 Dec, 2010 08:50 PM

There could be a scenario where the user wouldn't be aware of what exactly to type in. It would be nice, if there was an option to have a "See All" option at the end of the search results. A click on it could loadup a modal, listing all options. The user can simply click on one of the options and it could then be added to the text box.

Thanks for the great plugin :)

  1. 1 Posted by TJ McKenzie on 19 Dec, 2010 05:52 AM

    TJ McKenzie's Avatar

    I assume you are using the preset data options set with an array rather than a json response, correct?

    I'm no javascript pro, but I might be able to hack something together for you. I've successfully been able to grab the data array from the current instance of the plugin (single input field) and should be able to get it to display in a 3rd party modal plugin.

    To click on an option and at it to autoSuggest, I hope I can work that out.

  2. 2 Posted by Ashish on 19 Dec, 2010 07:52 AM

    Ashish's Avatar

    I am not using preset data options. So it is not necessary to read data from the control itself. The data is received via json.

    What I am looking at is appending an extra item to the 'suggestion' list which would read "See All". When the user clicks on it, It opens a url that lists all the data.

    Step 1: http://screencast.com/t/4Ab8yqo3

    Step 2: http://screencast.com/t/RKtdX8TnxWqA

    Hence there should be something that would allow adding content from the list on the modal.

  3. 3 Posted by TJ McKenzie on 19 Dec, 2010 04:40 PM

    TJ McKenzie's Avatar

    Oh okay. I've found out how to add the link to the bottom of the results list, and a customer function can be called when the View All link is activated.

    I've added this as a custom option so it can be used on a as-need bases across your website. Just add the following line as a custom default option
    viewall: false, //Adds a View All link to bottom of results list.

    Adding the View All link to the results listing is as follows:

    After:
    results_ul.append(formatted);

    Add:

    if(opts.viewall){
    // Add Show All to bottom of results list
    var showall = $('<li class="as-result-item" id="view-all">View All</li>').click(function() {
        // Custom call funtion
        alert("clicked");
        }).mousedown(function(){ input_focus = false; }).mouseover(function(){
            $("li", results_ul).removeClass("active");
                $(this).addClass("active")
            });
        $(".as-list").append(showall);
        // - End
    }
    

    The custom call, li class and ID can changed to suit your needs.

    Hope this helps.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac