Would you like to be notified for every new articles? Please click HERE to subscribe for newsletter.

Ajax Popup Search With JQuery Lookup Box

  • Posted on: 30 July 2013
  • By: admin

Lookup Box is name for this jQuery plugin. This plugin can help you to create an Ajax popup window to search the data from database then put it into your texfield after you click it. For the example, you might want to enter User Id in a textbox but you only know the User Name. With this plugin, you can search the user by the name in a popup window. When you click the User Name, the text field will be filled with User Id automatically.

How To Use

This script uses jQuery UI as its interface style. So we have to include the following script first.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="js/jquery.lookupbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/lookupbox.css" />

And then use it in your document like the following example.

$(document).ready(function () {
    title: 'Search User',
    url: 'user.php?chars=',
    imgLoader: '<img src="images/loader.gif">',
    onItemSelected: function(data){
    tableHeader: ['ID', 'Name']

The lookup box will be triggered when the element with ID lookup is clicked. In this case the element is a button placed beside the textfield. We need to pass several parameters such as:

  • title : will be used to set the window title.
  • url : the callback URL for supplying the data for Lookup Box.
  • imgLoader : the loading image when the searching process is in progress.
  • onItemSelected : the callback function that will be executed after one item in the list is clicked. There will be a variable which holding the detail of the selected data. Its fields are the same like the ones returned by the callback URL.
  • tableHeader : the header for table.

There are more parameters, but I haven't made a documentation about them yet.

Callback URL

The callback URL should prepare the data in JSON format. This is the example of its content.

("Content-type: application/json");

$con mysqli_connect("localhost""root""""test");

$char = isset($_GET['chars']) ? $_GET['chars'] : '';

$res mysqli_query($con"SELECT user_id, user_name FROM user WHERE user_name LIKE '%".mysqli_real_escape_string($con$char)."%'");
$rows = array();
while (
$data mysqli_fetch_assoc($res)) {
$rows[] = $data;


Live Demo

See the live demo here.


The source code can be downloaded from GitHub: https://github.com/w3shaman/jquery-lookupbox. Please feel free to contact me if you want to make contribution for this small project.



I did nothing just I changed my database name but its not working. Disply is fine but its not fetching the data.

its working fine.. i tried again.. tahnks.

Hey John! Apparently I’m facing a similar issue. My display settings are okay but I’m not able to fetch the data. Couple of days back I changed the name of my database. Kindly give the details that helped you to fix the issue. Thanks.
microsoft outlook online login

I want create lookup with data using google suggest. please show me demo?
theo doi dien thoai

Add new comment

Limited HTML

  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.