dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: List with search function

  1. #1
    Join Date
    Sep 2017
    Posts
    3

    List with search function

    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

  2. #2
    Join Date
    Sep 2016
    Posts
    18
    Create A Search List

    HTML Code:
    <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>

    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 */
    }
    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>

  3. #3
    Join Date
    Sep 2017
    Posts
    3
    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.

  4. #4
    Join Date
    Dec 2012
    Posts
    1,444
    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.
    Unfortunately I do not understand this. What should these options be? Predefined search patterns? Please explain more detailed and give some examples.

  5. #5
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,862

    Lightbulb

    Unclear of request, so just SWAG...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> 3-Level List to List </title>
    <style>
     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; }
    </style>
    </head>
    <body>
    <h1>Three Level Selection</h1>
    <form name=theForm>
     <div class="group">
    
      <div class="fleft">
       <strong>Select Transport:</strong><br>
       <ul>
         <li> <a href="#" onclick="changer('Air')">Air</a> </li>
         <li> <a href="#" onclick="changer('Land')">Land</a> </li>
         <li> <a href="#" onclick="changer('Sea')">Sea</a> </li>
       </ul>
      </div>
    
      <div class="fleft">
       <strong>Then ...</strong> Select Vehicle
       <input type="hidden" name="theState">
       <ul id="State" name="secondChoice"> </ul>
      </div>
      <div class="fleft">
       <strong>Then ...</strong> Select Type
       <input type="hidden" name="theType">
       <ul id="Vtype" name="thirdChoice"> </ul>
      </div>
    
     </div>
    </form>
    
    <script>
    /* 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<theOptions.length; i++) {
        st.innerHTML += '<li><a href="#" onclick="changer2(\''+theOptions[i]+'\')">'+theOptions[i]+'</a></li>'; }
    }
    
    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<theOptions.length; i++) {
    //    st.innerHTML += '<li>'+theOptions[i]+'</li>'; }
        st.innerHTML += '<li><a href="#" onclick="alert(\''+theOptions[i]+'\')">'+theOptions[i]+'</a></li>'; }
    
    }
    /*
    //  NOTE: [document.theForm.theState.value] will get you the name of the state,
    //  and [document.theForm.secondChoice.value] the name of the city chosen
    */
    
    
    </script>
    
    </body>
    </html>

  6. #6
    Join Date
    Sep 2017
    Posts
    3
    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>

  7. #7
    Join Date
    Dec 2012
    Posts
    1,444
    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>

  8. #8
    Join Date
    Dec 2012
    Posts
    1,444
    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.

  9. #9
    Join Date
    Sep 2017
    Posts
    4
    Wow that seem really complex

  10. #10
    Join Date
    Dec 2012
    Posts
    1,444
    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.

  11. #11
    Join Date
    Sep 2017
    Posts
    4
    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
    Last edited by Train; 09-10-2017 at 01:04 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles