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">
<input type="text" class="SearchFilter" />
<button class="SearchButtonClose" ></button>
<div class="SearchClear"></div>
<div class="SearchContent"> </div>

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

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

//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

//Position title elements

//Create an event for the search input


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

//Show all results on create



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 = ''

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!