Showing different panels depending on Autocompleter output

Question

I have a page that contains only a jQuery autocomplete textfield.
If the user performed a search and selected an item from the drop down list, a gird is shown under the autocompleter should appear smoothly containing the the data of the the selected item.
On the other hand if no data is found, a panel should appear smoothly under the autocompleter contains a couple of buttons and text.

Any tips on how to achieve this is highly appreciated.

Answer 1

The hardest part of this is determining if no results were returned as part of autocomplete's result set, but there are ways to do that. You haven't mentioned if you're using a remote or local data source, or what your data looks like, but this should get you a good idea of what to do.

1. Pass a function reference to the source argument. Inside that function, do something special if no results are returned. Alternatively, you could write code like this in the custom event handler that's outlined in the answer above:

   source: function(request, response) {
       var result = $.ui.autocomplete.filter(src, request.term);
       if (!result.length) {
           $("#container")
               .hide()
               .html("<strong>" + request.term + "</strong> Not Found.")
               .fadeIn(3000);
   
       }
       response(result);
   },
   

   Here, I'm just fading in some content with a <strong> tag (I know you want buttons and some other stuff, but the idea is the same).

2. Define an event handler for the select event and show different HTML on select:

   select: function(event, ui) {
       $("#container")
           .hide()
           .html("<table><tr><td>" + ui.item.value + "</td><td><a href='" + ui.item.info + "'>" + ui.item.info + "</a></td></tr></table>")
           .fadeIn(3000);
   }
   

   This example just assumes you have a property called info on each item available in the autocomplete, and draws a simple table.

Example: http://jsfiddle.net/andrewwhitaker/wBePy/

---

Notes:

• Although it isn't intuitive, you can actually have any properties you'd like inside of each autocomplete response item. You can access these properties by name inside of event handlers using ui.item.propertyName.
• If you are appending huge amounts of content, I might recommend using some kind of client-side templating such as jQuery.tmpl
• You can use fadeIn, show, or animate to smoothly append content.