Custom Select Box for Large Data Lists (PHP, AJAX)

Posted by admin at December 30, 2016

Developing projects for the aviation safety and the airline industry in general involves juggling a lot of large tables with total record numbers running into thousands or tens of thousands. These tables could be general information such as world languages and countries, or standard reference tables from international organisations such as ICAO, the FAA or EASA that serve as reference or working registers for aviation applications.

What this means, is having to load these tables into a form (specifically select boxes) for data entry and some applications I have worked on require more than one of such select boxes containing thousands of records each, thereby slowing increase the page load times.

This tutorial is a simple solution I came up with as a simple workaround to this problem. Instead of directly populating select boxes for each required field, we replace them with hidden controls. Select boxes are best used for submitting numeric values selected from a group. You can check these tutorials out to have a deeper understanding on how these components work, as they will be used in this tutorial.


  1. User click on select link to load a data list, in order to make a selection (just as in a select box).
  2. The user onClick event sends values to a global search box to process AJAX calls, and to save the values selected.
  3. The global search box is loaded up, containing the global select box and a search text box.
  4. An AJAX function populates the select box with specified values.
  5. User can now instantaneously search the select box contents by entering search keywords into the global text box. User’s onKey events filters the select box options.
  6. User makes a selection and click on a Select Value button.
  7. The Select Value button picks the selected option value and text and displays them at the appropriate HTML elements, text for UI display and value for form submission.

Pages: 1 2 3 4 5 6

Suggested Read