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!


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s