List with search function

@macauleyp12Sep 09.2017

Hello.

I am trying to create a list with a around 3 columns named ‘Fishery’ ‘Region’ and ‘Fishery type’. I have created a table with information filled out for each 3 columns and was wondering how I would add a search function. I would like for it be a drop down function that allows the user to select one of the options and then it only displays the results from the table that match. Can anyone help?

Thank you

to post a comment

HTML

10 Comments(s) _↴

@MiaCharlotteSep 09.2017 — #Create A Search List

[code=html]<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
 
 <ul id="myUL">
 <li><a href="#" class="header">A</a></li>
 <li><a href="#">Adele</a></li>
 <li><a href="#">Agnes</a></li>
 
 <li><a href="#" class="header">B</a></li>
 <li><a href="#">Billy</a></li>
 <li><a href="#">Bob</a></li>
 
 <li><a href="#" class="header">C</a></li>
 <li><a href="#">Calvin</a></li>
 <li><a href="#">Christina</a></li>
 <li><a href="#">Cindy</a></li>
 </ul>[/code]

Step 2) Add CSS:

[CODE]#myInput {
 background-image: url('/css/searchicon.png'); /* Add a search icon to input */
 background-position: 10px 12px; /* Position the search icon */
 background-repeat: no-repeat; /* Do not repeat the icon image */
 width: 100%; /* Full-width */
 font-size: 16px; /* Increase font-size */
 padding: 12px 20px 12px 40px; /* Add some padding */
 border: 1px solid #ddd; /* Add a grey border */
 margin-bottom: 12px; /* Add some space below the input */
 }
 
 #myUL {
 /* Remove default list styling */
 list-style-type: none;
 padding: 0;
 margin: 0;
 }
 
 #myUL li a {
 border: 1px solid #ddd; /* Add a border to all links */
 margin-top: -1px; /* Prevent double borders */
 background-color: #f6f6f6; /* Grey background color */
 padding: 12px; /* Add some padding */
 text-decoration: none; /* Remove default text underline */
 font-size: 18px; /* Increase the font-size */
 color: black; /* Add a black text color */
 display: block; /* Make it into a block element to fill the whole list */
 }
 
 #myUL li a.header {
 background-color: #e2e2e2; /* Add a darker background color for headers */
 cursor: default; /* Change cursor style */
 }
 
 #myUL li a:hover:not(.header) {
 background-color: #eee; /* Add a hover effect to all links, except for headers */
 }
 [/CODE]

Step 3) Add JavaScript:

[CODE]<script>
 function myFunction() {
 // Declare variables
 var input, filter, ul, li, a, i;
 input = document.getElementById('myInput');
 filter = input.value.toUpperCase();
 ul = document.getElementById("myUL");
 li = ul.getElementsByTagName('li');
 
  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
   a = li[i].getElementsByTagName("a")[0];
   if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
   li[i].style.display = "";
   } else {
   li[i].style.display = "none";
   }
  }
 }
 </script>[/CODE]

@macauleyp12authorSep 09.2017 — #Thanks for the reply but I'm not quite sure if you read my posts. I have seen this particular code all over the internet whilst I've been on my searches but this isn't what I was looking for. Im not looking for a search bar, more of a drop down list for each column that once selected only shows matching results. Again if anyone could help with this that'd be ideal.

Thanks.

@SempervivumSep 09.2017 — #I would like for it be a drop down function that allows the user to select one of the options and then it only displays the results from the table that match.[/QUOTE]Unfortunately I do not understand this. What should these options be? Predefined search patterns? Please explain more detailed and give some examples.

@JMRKERSep 09.2017 — #Unclear of request, so just SWAG... ?

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;title&gt; 3-Level List to List &lt;/title&gt;
 &lt;style&gt;
 ul { list-style: none; margin-top: 0; padding-left: 1em; }
 .fleft { float: left; margin-left: 2em; }
 .frite { float: right; }
 
 .group { width: 50%; }
 .group:after { content: ""; display: table; clear: both; }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;Three Level Selection&lt;/h1&gt;
 &lt;form name=theForm&gt;
 &lt;div class="group"&gt;
 
 &lt;div class="fleft"&gt;
 &lt;strong&gt;Select Transport:&lt;/strong&gt;&lt;br&gt;
 &lt;ul&gt;
 &lt;li&gt; &lt;a href="#" onclick="changer('Air')"&gt;Air&lt;/a&gt; &lt;/li&gt;
 &lt;li&gt; &lt;a href="#" onclick="changer('Land')"&gt;Land&lt;/a&gt; &lt;/li&gt;
 &lt;li&gt; &lt;a href="#" onclick="changer('Sea')"&gt;Sea&lt;/a&gt; &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;div class="fleft"&gt;
 &lt;strong&gt;Then ...&lt;/strong&gt; Select Vehicle
 &lt;input type="hidden" name="theState"&gt;
 &lt;ul id="State" name="secondChoice"&gt; &lt;/ul&gt;
 &lt;/div&gt;
 &lt;div class="fleft"&gt;
 &lt;strong&gt;Then ...&lt;/strong&gt; Select Type
 &lt;input type="hidden" name="theType"&gt;
 &lt;ul id="Vtype" name="thirdChoice"&gt; &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;/div&gt;
 &lt;/form&gt;
 
 &lt;script&gt;
 /* This script and many more are available free online at
 The JavaScript Source!! http://www.javascriptsource.com
 Original created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/
 
 Modified by: JMR on 6/12/2017
 */
 
 var Transport = ['Air','Land','Sea']
 
 var Air =  ['Planes','Ultralight','Glider'];
 var Planes = ['747','Cessna'];
 var Ultralight = ['Kolb Flyer','Kitfox'];
 var Glider = ['Schwietzer Glider'];
 
 var Land = ['Car','Truck','Train'];
 var Car= ['BMW Z3','Chevy Malibu','Lincoln LS'];
 var Truck = ['F-150','S-10','Tahoe'];
 var Train= ['Freight Train','Passenger Train'];
 
 var Sea = ['Boat','Submarine'];
 var Boat = ['Oil Tanker','Fishing Boat'];
 var Submarine = ['Los Angeles Class','Kilo Class','Seawolf Class'];
 
 function changer(link) {
 if (link=="") { return; }
 var theOptions = [];
 document.theForm.theState.value=link;
 
 switch (link) {
 case "Air": theOptions = [].concat(Air); break;
 case "Land": theOptions = [].concat(Land); break;
 case "Sea": theOptions = [].concat(Sea); break;
 default: break;
 }
 var st = document.getElementById('State');
 st.innerHTML = '';
 for (var i=0; i&lt;theOptions.length; i++) {
 st.innerHTML += '&lt;li&gt;&lt;a href="#" onclick="changer2(''+theOptions[i]+'')"&gt;'+theOptions[i]+'&lt;/a&gt;&lt;/li&gt;'; }
 }
 
 function changer2(link) {
 if (link=="") { return; }
 var theOptions = [];
 document.theForm.theState.value=link;
 
 switch (link) {
 case "Planes": theOptions = [].concat(Planes); break;
 case "Ultralight": theOptions = [].concat(Ultralight); break;
 case "Glider": theOptions = [].concat(Glider); break;
 case "Car": theOptions = [].concat(Car); break;
 case "Truck": theOptions = [].concat(Truck); break;
 case "Train": theOptions = [].concat(Train); break;
 case "Boat": theOptions = [].concat(Boat); break;
 case "Submarine": theOptions = [].concat(Submarine); break;
 default: break;
 }
 var st = document.getElementById('Vtype');
 st.innerHTML = '';
 for (var i=0; i&lt;theOptions.length; i++) {
 //    st.innerHTML += '&lt;li&gt;'+theOptions[i]+'&lt;/li&gt;'; }
 st.innerHTML += '&lt;li&gt;&lt;a href="#" onclick="alert(''+theOptions[i]+'')"&gt;'+theOptions[i]+'&lt;/a&gt;&lt;/li&gt;'; }
 
 }
 /*
 //  NOTE: [document.theForm.theState.value] will get you the name of the state,
 //  and [document.theForm.secondChoice.value] the name of the city chosen
 */
 
 
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@macauleyp12authorSep 10.2017 — #Sorry for not being clear. Its hard to put my idea across via a message. So far I have created the following code. It is doing okay but isn't quite there. I have 3 search functions as you can see and I want them to be for each separate column. I however cannot manage this and was wondering if anyone could take a look and just help us out, thanks!

<html>

<head>

<style>

#myInput {

background-image: url('/css/searchicon.png'); /* Add a search icon to input */

background-position: 10px 12px; /* Position the search icon */

background-repeat: no-repeat; /* Do not repeat the icon image */

width: 45%; /* Full-width */

font-size: 16px; /* Increase font-size */

padding: 12px 20px 12px 40px; /* Add some padding */

border: 1px solid #ddd; /* Add a grey border */

margin-bottom: 12px; /* Add some space below the input */

}

#myInput2 {

background-image: url('/css/searchicon.png'); /* Add a search icon to input */

background-position: 10px 12px; /* Position the search icon */

background-repeat: no-repeat; /* Do not repeat the icon image */

width: 26%; /* Full-width */

font-size: 16px; /* Increase font-size */

padding: 12px 20px 12px 40px; /* Add some padding */

border: 1px solid #ddd; /* Add a grey border */

margin-bottom: 12px; /* Add some space below the input */

}

#myInput3 {

background-image: url('/css/searchicon.png'); /* Add a search icon to input */

background-position: 10px 12px; /* Position the search icon */

background-repeat: no-repeat; /* Do not repeat the icon image */

width: 27%; /* Full-width */

font-size: 16px; /* Increase font-size */

padding: 12px 20px 12px 40px; /* Add some padding */

border: 1px solid #ddd; /* Add a grey border */

margin-bottom: 12px; /* Add some space below the input */

}

#myTable {

border-collapse: collapse; /* Collapse borders */

width: 100%; /* Full-width */

border: 1px solid #ddd; /* Add a grey border */

font-size: 18px; /* Increase font-size */

}

#myTable th, #myTable td {

text-align: left; /* Left-align text */

padding: 12px; /* Add padding */

}

#myTable tr {

/* Add a bottom border to all table rows */

border-bottom: 1px solid #ddd;

}

#myTable tr.header, #myTable tr:hover {

/* Add a grey background color to the table header and on hover */

background-color: #f1f1f1;

}

</style>

<script>

function myFunction() {

// Declare variables

var input, filter, table, tr, td, i;

input = document.getElementById("myInput");

filter = input.value.toUpperCase();

table = document.getElementById("myTable");

tr = table.getElementsByTagName("tr");

// Loop through all table rows, and hide those who don't match the search query

for (i = 0; i < tr.length; i++) {

td = tr[i].getElementsByTagName("td")[0];

if (td) {

if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

tr[i].style.display = "";

} else {

tr[i].style.display = "none";

}

}

}

}

</script>

<script>

function myFunction1() {

// Declare variables

var input, filter, table, tr, td, i;

input = document.getElementById("myInput2");

filter = input.value.toUpperCase();

table = document.getElementById("myTable");

tr = table.getElementsByTagName("tr");

// Loop through all table rows, and hide those who don't match the search query

for (i = 0; i < tr.length; i++) {

td = tr[i].getElementsByTagName("td")[0];

if (td) {

if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

tr[i].style.display = "";

} else {

tr[i].style.display = "none";

}

}

}

}

</script>

</head>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for fishery..">

<input type="text" id="myInput2" onkeyup="myFunction1()" placeholder="Search for region..">

<input type="text" id="myInput3" onkeyup="myFunction2()" placeholder="Search for fishery type..">

<table id="myTable">

<tr class="header">

<th style="width:45%;">Fishery</th>

<th style="width:27%;">Country</th>

<th style="width:40%;">Fishery Type</th>

</tr>

<tr>

<td>Manor Farm</td>

<td>Bedfordshire</td>

<td>Dayticket/Complex</td>

</tr>

<tr>

<td>Linear Fisheries</td>

<td>Oxfordshire</td>

<td>Dayticket/Complex</td>

</tr>

<tr>

<td>Linch Hill Fisheries</td>

<td>Oxfordshire</td>

<td>Dayticket/Complex</td>

</tr>

<tr>

<td>Chigboro Fisheries</td>

<td>Essex</td>

<td>Dayticket/complex</td>

</tr>

<tr>

<td>Wraysbury</td>

<td>Surrey</td>

<td>Dayticket/complex</td>

</tr>

</table>[/QUOTE]

@SempervivumSep 10.2017 — #This should do the job:

[CODE]<!doctype html>
 <html>
 <head>
 <style>
 .myInput {
 background-image: url('/css/searchicon.png'); /* Add a search icon to input */
 background-position: 10px 12px; /* Position the search icon */
 background-repeat: no-repeat; /* Do not repeat the icon image */
 width: 45%; /* Full-width */
 font-size: 16px; /* Increase font-size */
 padding: 12px 20px 12px 40px; /* Add some padding */
 border: 1px solid #ddd; /* Add a grey border */
 margin-bottom: 12px; /* Add some space below the input */
 }
 
   #myTable {
   border-collapse: collapse; /* Collapse borders */
   width: 100%; /* Full-width */
   border: 1px solid #ddd; /* Add a grey border */
   font-size: 18px; /* Increase font-size */
   }
 
   #myTable th, #myTable td {
   text-align: left; /* Left-align text */
   padding: 12px; /* Add padding */
   }
 
   #myTable tr {
   /* Add a bottom border to all table rows */
   border-bottom: 1px solid #ddd;
   }
 
   #myTable tr.header, #myTable tr:hover {
   /* Add a grey background color to the table header and on hover */
   background-color: #f1f1f1;
   }
  </style>
  <script>
   function myFunction(ele) {
   // Declare variables
   var filter, table, tr, td, i;
   var colidx = ele.getAttribute("data-colidx");
   filter = ele.value.toUpperCase();
   table = document.getElementById("myTable");
   tr = table.getElementsByTagName("tr");
 
   // Loop through all table rows, and hide those who don't match the search query
   for (i = 1; i < tr.length; i++) {
   td = tr[i].getElementsByTagName("td");
   if (td[colidx].innerHTML.toUpperCase().indexOf(filter) > -1) {
   tr[i].style.display = "";
   } else {
   tr[i].style.display = "none";
   }
   }
   }
  </script>
 </head>
 <body>
 <input type="text" class="myInput" data-colidx="0" onkeyup="myFunction(this)" placeholder="Search for fishery..">
 <input type="text" class="myInput" data-colidx="1" onkeyup="myFunction(this)" placeholder="Search for region..">
 <input type="text" class="myInput" data-colidx="2" onkeyup="myFunction(this)" placeholder="Search for fishery type..">
 
  <table id="myTable">
   <tr class="header">
   <th style="width:45%;">Fishery</th>
   <th style="width:27%;">Country</th>
   <th style="width:40%;">Fishery Type</th>
   </tr>
   <tr>
   <td>Manor Farm</td>
   <td>Bedfordshire</td>
   <td>Dayticket/Complex</td>
   </tr>
   <tr>
   <td>Linear Fisheries</td>
   <td>Oxfordshire</td>
   <td>Dayticket/Complex</td>
   </tr>
   <tr>
   <td>Linch Hill Fisheries</td>
   <td>Oxfordshire</td>
   <td>Dayticket/Complex</td>
   </tr>
   <tr>
   <td>Chigboro Fisheries</td>
   <td>Essex</td>
   <td>Dayticket/complex</td>
   </tr>
   <tr>
   <td>Wraysbury</td>
   <td>Surrey</td>
   <td>Dayticket/complex</td>
   </tr>
 
  </table>
 
 </body>
 
 </html>[/CODE]

@SempervivumSep 10.2017 — #In order to be able to have only one function I applied a data attribute at each input specifying the column to be searched. Then in the javascript I do the comparison for that column only.

@pedroribeiro123Sep 10.2017 — #Wow that seem really complex

@SempervivumSep 10.2017 — #Maybe multiple functions are easier to read but the benefit of my solution is, that it can be easily extended: Just extend the table and add inputs; no modification of the javascript necessary.

@pedroribeiro123Sep 10.2017 — #Maybe the guys at *Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.** can help you out

Also in #HTML _↴

how to autosize a popup window??Help for searchtool Need form help

Success!

Help @macauleyp12 spread the word by sharing this article on Twitter...

Tweet This

List with search function

10 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

List with search function

10 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #HTML _↴