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 () {
  $("#lookup").lookupbox({
    title: 'Search User',
    url: 'user.php?chars=',
    imgLoader: '<img src="images/loader.gif">',
    onItemSelected: function(data){
      $('input[name=user_id]').val(data.user_id);
      $('input[name=user_name]').val(data.user_name);
    },
    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.

<?php
header("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;
}

echo 

json_encode($rows);
?>

Live Demo

See the live demo here.

Download

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.