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.

• Loading values with AJAX (for select box)
• Instantaneous search with JavaScript
• Show/Hide with JS
• Populating a select box with PHP/MySQL

Algothrim

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.

   0 likes

Pages: 1 2 3 4 5 6

Suggested Read

Npm error on command line: The system cannot find the path specified.

I spent a whooping 5 hours researching an error that prevented me from completing npm dependent tools. I was getting two recurring errors: > pub get failed (1; The system cannot find the path specified.) proceeded by a bunch of these > The system cannot find the path specified.