Custom Select Box for Large Data Lists (PHP, AJAX)
Posted by admin at December 30, 2016js/ajax.js
This file contains JS code that handles the AJAX calls for retrieving values from previous file (ajax.php). Full details of this file is contained in the tutorial, Loading values into DOM with AJAX and PHP .
index.php
The index.php file will hold a global bulk search box where select box options are deposited after calls. This ensures that all bulk option loads are restricted to a single global select box.
We start off the index,php file by including our resource JS and CSS files
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
Then, we define the The global bulk search box, the div that will contain our global select box and text box for displaying and filtering bulk results from AJAX calls. Below is what we are trying to achieve:
So the CSS would look something like this
/* class to hide */
.hide {display: none;}
/* the box that will hold our global controls */
.ulti_box {position: fixed; left: 35%; top: 10px; width: 30%; border: 1px solid #f0f0f0; padding: 5px; box-shadow: 1px 2px 3px #999; padding: 10px; border-top: 5px solid #d0d0d0; background: #fff; }
The HTML for the box will look like this:
<div id="g_bulk_box" class="ulti_box hide">
<div>
<div align="left" class="d90">
<img id="lgif_id" name="lgif_id" class="" src="img/dot.png" width="16" />
<span class="fw_b"> AJAX Bulk Select Box: </span>
</div>
<div align="right" class="dauto">
<a href="#" onclick="show_hide(g_bulk_box, 'hide');">
<img src="img/cancel_32x32.png" width="16" />
</a>
</div>
<div class="dclear"></div>
</div>
<div align="center">
</br>
<select id="g_res_box" name="g_res_box" style="width:100%" multiple></select>
</br></br>
<input id="g_src_box" name="g_src_box" value=""
onKeyUp="insta_src(this.value, 'opt_src');"
placeholder="search to filter select box..." style="width:100%">
<br><span id="res_counter"></span>
</br></br>
<input type="button" id="g_sel_btn" name="g_sel_btn" class="fw_b" value="Select Value"
onClick="select_global_option();"
/>
<input type="hidden" id="g_text" name="g_text" value="" />
<input type="hidden" id="g_value" name="g_value" value="" />
</br>
</div>
</div>
Notice that the box is hidden as the hide class is added to it.
<div id="g_bulk_box" class="ulti_box hide">
The box will only appear every time the user clicks to make a selection from a large table.
insta_src(): This function performs instantaneous search on the select box options, filtering out options that match the string entered into the ‘g_src_box’ text box by the user.
<input id="g_src_box" name="g_src_box" value=""
onKeyUp="insta_src(this.value, 'opt_src');"
placeholder="search to filter select box..." style="width:100%">
<br><span id="res_counter"></span>
</br></br>
This function is added to the main.js file. Details on this function can be found in Instantaneous search with JavaScript.
select_global_option(): This function copies the selected option value and text to the appropriate HTML elements
- the selected option’s value is copied to the value property of the HTML element that will hold the value to be saved. This HTML element to hold the value is temporarily saved to the hidden field named ‘g_value’.
- the selected option’s text is copied to the innerHTML attribute of the HTML element that displays the selected result to the user.. This HTML element to display the title of the selected option is temporarily saved to the hidden field named ‘g_text’.
<input type="hidden" id="g_text" name="g_text" value="" />
<input type="hidden" id="g_value" name="g_value" value="" />
How these HTML elements get their values is explained further on. Below is the full code for the function, select_global_option().
function select_global_option()
{
// select the HTML element that will hold the value: stored in g_value
var ctrl_value = document.getElementById(g_value.value);
// save the value of the selected option in the
// global select box to the HTML element's value property
ctrl_value.value = g_res_box.options[g_res_box.selectedIndex].value;
// select the HTML element that will hold the text: stored in g_text
var ctrl_text = document.getElementById(g_text.value);
// save the text property of the selected option in the
// global select box to the HTML element's innerHTML property
ctrl_text.innerHTML = g_res_box.options[g_res_box.selectedIndex].text;
// hide the box
show_hide(g_bulk_box);
}
Next we display the control for making the selection from our global select box.
<br><span class="fw_b">Select airport: </span>
<?php
$opt_val = 'airport_id';
$opt_txt = 'airport_text';
$lopt = 'lopt_airports';
?>
<a href="#" id="<?php echo $opt_txt; ?>" name="<?php echo $opt_txt; ?>" data-value="<?php echo $opt_val; ?>" title="click to select value" onclick="open_global_select('>?php echo $lopt; ?>');
">-- select --</a>
<input type="hidden" id="<?php echo $opt_val; ?>" name="<?php echo $opt_val; ?>" value="" />
It is going to look something like this
The open_global_select() is as defined below as should be pasted in the main.js file. This function opens the global select box and loads up the options as defined by the list option command
function open_global_select(link, lopt)
{
// initialise the list option parameter
if (lopt === undefined) lopt = '';
// show the bulk search box
show_hide(g_bulk_box, 'show');
// set the global value and text elements
g_value.value = link.getAttribute('data-value');
g_text.value = link.id;
// populate the global select box using AJAX
gen_ajax_opt(lopt);
}
- link is the HTML element that was clicked to open the global select box
- lopt is the command for generating options. For example, ‘lopt_airports’ will populate the global select box with airports.