jQueryUi Dialog Search


I use the jQueryUI dialog widget quite extensively in my ajax enabled web projects. Recently, I decided to use it as a popup search box by adding a text input to the title bar. Let’s call it jQueryUi Dialog Search.

I opened up my trusty OmniGraffle and came up with the following:

The following is the markup for the custom dialog box featuring my new custom titlebar


<div id="SearchDialog">
<div class="SearchTitle" >
<div class="SearchTitleText">Search Friends</div>
<div class="SearchTitleFilterButton">
<span>Filter:</span>
<input type="text" class="SearchFilter" />
<button class="SearchButtonClose" ></button>
</div>
<div class="SearchClear"></div>
</div>
<div class="SearchContent"> </div>
</div>

I used the “create” event to remove the default title bar and setup my custom title

$('#SearchDialog').dialog({
width: 500,
create: function () {
//Get a reference to jquery ui generated element
var widget = $(this).dialog('widget');

//Get a reference to content div
var dialog = $(this);

//Delete the default jquery ui title bar
widget.find('.ui-dialog-titlebar').remove();

//Remove the default padding values for the popup
widget.css('padding', 0).find('.ui-dialog-content').css('padding', 0);

//Use jquery ui styling for our new titlebar
$('.SearchTitle',dialog).addClass('ui-widget-header');

//Position title elements
$('.SearchTitleText',dialog).css('float','left');
$('.SearchTitleFilterButton',dialog).css('float','right');
$('.SearchClear',dialog).css('clear','both');

//Create an event for the search input
$('.SearchFilter',dialog).keyup(function(){

ShowResults($(this).val(),friends);
});

//Create a close button and allow it to close the popup
$('.SearchButtonClose',dialog).button({
icons: { primary: 'ui-icon-close' },
text: false
}).css('width', 16)
.click(function () {
dialog.dialog('close');
});

//Show all results on create
ShowResults('',friends);

}

});

Now to complete this example you will need a datasource, way to search for items and render the results

var friends = ["John","Bob","Jones","Tessa","Anna","Casper","Ed","Francis","Greg","Hanna","Ivan" ];
//Show results in search window based on input<
function ShowResults(filterText,dataSource)
{
var html = ''

$.each(dataSource,function(index,value){
if(filterText.length < 1 || value.toLowerCase().indexOf(filterText)!=-1){
html += '<li><a href="#" onClick="SelectResult(this)">'+value+'</a></li>';
}

});

$('#searchDialog .SearchContent').html(html==''?'No Results':'<ul>'+html+'</ul>');

}

//Use this function to select an item
function SelectResult(element){
alert('Hello, I am ' + $(element).text())
}

The end result looks like this:

You can also try the live demo in my app engine playground.

I hope this will be helpful to someone. Cheers!

Advertisements

2 thoughts on “jQueryUi Dialog Search

  1. I was wondering if you ever considered changing the structure of your site?
    Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people could connect with it better.

    Youve got an awful lot of text for only having 1 or two
    images. Maybe you could space it out better?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s