How to show different panels depending on Autocompleter output?

[Hussein Baghdadi]

Hi,
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.
Thanks for help and time.

[Hussein Baghdadi]

$(function() { $('#people-search').autocomplete({ source: function(request, response) { $.ajax({ url: 'localurl', dataType: 'json', data: request, success: function(res) { if (! res.length) { $('result').hide(); $('empty-result').show(); } response(res); } }); } , minLength: 2, select: function(event, ui) { $('empty-result').hide(); $('result').show(); } }); });
Well actually none of the panels are shown or hidden.
What I'm missing?

[Bear Bibeault]

Are the callbacks being triggered?

[Hussein Baghdadi]

yes they callbacks are being triggered.
I'm reading http://api.jquery.com/show/ and it says:

Note: If using !important in your styles, such as display: none !important, it is necessary to override the style using .css('display', 'block !important') should you wish for .show() to function correctly.

I'm using a CSS framework called 52Framework to layout my pages so maybe !important holds the clue.
I even tried to show or hide one of the panels outside any trigger code, still not working.

[Hussein Baghdadi]

I was typing wrong selectors.