Basic Usage

A basic usage of lookup box. For the loading indicator we just use the "Loading..." text.

User ID :
Name :
Role :

The code :

$(document).ready(function () {
  $("#lookup1").lookupbox({
    title: 'Search User',
    url: 'user.php?chars=',
    imgLoader: 'Loading...',
    width: 500,
    onItemSelected: function(data){
      $('input[name=user_id]').val(data.user_id);
      $('input[name=user_name]').val(data.user_name);
      $('input[name=user_role]').val(data.user_role);
    },
    tableHeader: ['ID', 'Name', 'Role']
  });
});

Hiding Table Field

The more columns in SELECT statement, there will be more columns too in the table in lookup box. We can hide them using "hiddenFields" option then put the field name into the list. Although it is hidden, it is still accessible like the "user_role" field the example below.

We can also use image as the loading indicator by passing the HTML tag to "imgLoader" option.

User ID :
Name :
Role :

The code :

$(document).ready(function () {
  $("#lookup2").lookupbox({
    title: 'Search User',
    url: 'user.php?chars=',
    imgLoader: '<img src="images/loader.gif" />',
    width: 450,
    onItemSelected: function(data){
      $('input[name=user_id2]').val(data.user_id);
      $('input[name=user_name2]').val(data.user_name);
      $('input[name=user_role2]').val(data.user_role);
    },
    tableHeader: ['ID', 'Name'],
    hiddenFields: ['user_role']
  });
});

Setting Column Width

Now, the column width in table can be configured using colWidth options.

The colWidth value can be array for sequential setting or object for setting based on the field name in query result.

User ID :
Name :
Role :

The code :

$(document).ready(function () {
  $("#lookup3").lookupbox({
    title: 'Search User',
    url: 'user.php?chars=',
    imgLoader: '<img src="images/loader.gif" />',
    width: 500,
    onItemSelected: function(data){
      $('input[name=user_id3]').val(data.user_id);
      $('input[name=user_name3]').val(data.user_name);
      $('input[name=user_role3]').val(data.user_role);
    },
    tableHeader: ['ID', 'Name', 'Role'],
    colWidth: ['65px', null, '100px'], // Set column width sequentially.
  });
});

OR

$(document).ready(function () {
  $("#lookup3").lookupbox({
    title: 'Search User',
    url: 'user.php?chars=',
    imgLoader: '<img src="images/loader.gif" />',
    width: 500,
    onItemSelected: function(data){
      $('input[name=user_id3]').val(data.user_id);
      $('input[name=user_name3]').val(data.user_name);
      $('input[name=user_role3]').val(data.user_role);
    },
    tableHeader: ['ID', 'Name', 'Role'],
    colWidth: {'id':'65px', 'user_role':'100px'], // Set column by data key/field name.
  });
});