First of all let me introduce you to a really handy JavaScript called list.js and what it does is allows you to have a dynamic list of any items you want in a static HTML page without any use of database. And the implementation of this script is really very easy, all you need to do is make your list of items in tables just like you do in HTML and then just add a class reference to your table and include this list.js in header and you are done. For more info visit list.js website to know more about it and I would recommend to download it and use it and then come back to this article. If you are already familiar with this script then proceed to read further.
When you create a dynamic list with this script it allows to Search and filter the list using an inbuilt Search Box and sort buttons. But what if we need a drop down selection option for our list, for example we have a big list of restaurant names according to city and we want to filter the list by selecting city list in drop down? In list.js all we got for this is a search box and we have to manually enter the city name in search box every time which is not the best option. Because I am lazy and always go for the easiest route here is what I planned to do: Make a selection box with cities name and when someone select the city from drop down, the value of city would go straight into the search box and this will filter our list.
So first of all we need a selection box HTML code and a javascript that will take value from selection and feed it to search box.
<select class="derp" name="cityy" id="filter" onchange="changeValue();">
<option value="">-- Select City --</option>
<option value="Brooklyn">Brooklyn</option>
<option value="Dallas">Dallas</option>
<option value="Washington">Washington</option>
</select>Okay so the above code will give you a drop down list. You will notice class, name, id and onchange value given for the select box. Out of these the value of id and onchange is important, rest is optional. We will now use the id value (filter) and onchange function (changleValue) in a javascript that will pull value from selection and feed it to list.js search box. You need to put this script in header before the </head> tag.
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('filter').value;
if(option=="Brooklyn"){
document.getElementById('field').value="Brooklyn";
document.getElementById("field").focus();
}
else if(option=="Dallas"){
document.getElementById('field').value="Dallas";
document.getElementById("field").focus();
}
else if(option=="Washington"){
document.getElementById('field').value="Washington";
document.getElementById("field").focus();
}
else if(option==""){
document.getElementById('field').value="";
document.getElementById("field").focus();
}
}
</script>
I have used 3 city names but you can add as many as you like by adding more “else if” statement. The last “” blank value is for – select city – value in drop down so that when user selects this value, it displays all the cities. You will notice that I have used focus() function after feeding the value and this is to make the cursor go in the search box to mimic actual typing in the search box otherwise search box will not detect the text entered by our javascript. Now every time you select any option from the drop down, its value will go in the search box and since its an ajax search it should automatically filter our list now. Because search box is useless you may want to hide it from users now which you can do by using this css code:
.search{
width:0px!important;
height:0px!important;
padding:0px!important;
}No we could not use visibility hidden or display none here because that will remove the search box totally from HTML code and that will result in our drop down not working, we want this search box in HTML code but just not visible to users.
All seems to be ready now however when tested this code didn’t worked for me. Reason was that list.js was using “keyup” function for triggering search box and we are using “focus””. So what you need to do is open up list.js file and search for “keyup” and replace it with “focus”. Now your script is ready and dropdown selection should work fine!
