Todavía soy nuevo en la programación y actualmente encuentro un problema. He utilizado un código de W3schools que me permite filtrar la tabla cuando coincide con el resultado de la búsqueda. Sin embargo, quiero mejorarlo para los usuarios del sitio web. Quiero permitirles que puedan buscar a través del cuadro de búsqueda y también darles la opción de seleccionar un menú desplegable del cuadro que devuelve el mismo resultado.

A continuación se muestra el código que he usado para HTML:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."><table id="myTable">
<tr class="header">
    <th style="width:60%;">Fruit Name</th>
    <th style="width:40%;">Place of Origin</th>
</tr>
<tr>
    <td>Apple</td>
    <td>Asia</td>
</tr>
<tr>
    <td>Black Berry</td>
    <td>North America</td>
</tr>
<tr>
    <td>Durian</td>
    <td>SouthEast Asia</td>
</tr>
<tr>
    <td>Watermelon</td>
    <td>South Korea</td>
</tr></table>

Y el JavaScript utilizado:

<script>
    function myFunction() {
        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>    

Lamento este lío, en resumen, estos fueron tomados del sitio W3school con algunos cambios. En lugar de tener solo un cuadro de búsqueda, quiero implementar un menú desplegable con el cuadro de búsqueda si es posible. Cualquier ayuda será muy apreciada.

1
Azvier 13 nov. 2017 a las 10:43

2 respuestas

La mejor respuesta

Según sus comentarios, a continuación se muestra el código actualizado con el cuadro de búsqueda y el menú desplegable que filtrará las filas:

function myFunction(searchTerm) {
  var input, filter, table, tr, td, i;
  filter = searchTerm.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";
      }
    }
  }
}

var options = $("#fruitOptions");
$("#myTable tr:not(.header)").each(function() {
  options.append($("<option />").val($(this).find("td:first-child").text()).text($(this).find("td:first-child").text()));
});

$("#myInput").on('input', function() {
  myFunction($(this).val());
});

$("#fruitOptions").on('change', function() {
  myFunction($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="Search for names..">
<select id="fruitOptions">
<option value=''>- Please select -</option></select>
<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Fruit Name</th>
    <th style="width:40%;">Place of Origin</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Asia</td>
  </tr>
  <tr>
    <td>Black Berry</td>
    <td>North America</td>
  </tr>
  <tr>
    <td>Durian</td>
    <td>SouthEast Asia</td>
  </tr>
  <tr>
    <td>Watermelon</td>
    <td>South Korea</td>
  </tr>
</table>
2
Milan Chheda 13 nov. 2017 a las 08:19

Pruebe esto :

Html

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
    <select id="selectItems">
        <option>NA</option>
    </select>
<table id="myTable">

    <tr class="header">
        <th style="width:60%;">Fruit Name</th>
        <th style="width:40%;">Place of Origin</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>Asia</td>
    </tr>
    <tr>
        <td>Black Berry</td>
        <td>North America</td>
    </tr>
    <tr>
        <td>Durian</td>
        <td>SouthEast Asia</td>
    </tr>
    <tr>
        <td>Watermelon</td>
        <td>South Korea</td>
    </tr></table>

Javascript:

function init()
{
 //insert item in dropdown from table.

 var html_for_elect = '';
 var itm_dd = document.getElementById("selectItems");

 table1 = document.getElementById("myTable");
 trtbl = table1.getElementsByTagName("tr");

 for (i = 0; i < trtbl.length; i++) {
            td = trtbl[i].getElementsByTagName("td")[0];
            if (td) {
                html_for_elect = html_for_elect + "<option>"+td.innerHTML+"</option>";

            }
        }
itm_dd.innerHTML = html_for_elect;
}
init();
    function myFunction() {
        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";
                }
            }
        }




    }
    function myFunction1() {
        var input, filter, table, tr, td, i;
        input = document.getElementById("selectItems");
        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";
                }
            }
        }

        document.getElementById("myInput").value= input.value;

    }

// myFunction1 can be use as (only use one of these myFunction1 functions):

function myFunction1() {

        document.getElementById("myInput").value= 
        document.getElementById("selectItems").value;
        myFunction();

    }
1
A.D. 13 nov. 2017 a las 08:49