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']
  });
});