filtro de búsqueda en html css y ejemplo de código javascript puro

Ejemplo 1: funcionalidad de búsqueda para la tabla html en el cuadro de texto

BYLOVESINGH,Callthisfunction onKeyUp event ofTEXTBOX.functionmyFunction()var input, filter, table, tr, td, i;
            input =document.getElementById("TextBoxID");
            filter = input.value.toUpperCase();
            table =document.getElementById("TableID");
            tr = table.getElementsByTagName("tr");for(i =0; i < tr.length; i++)
                td = tr[i].getElementsByTagName("td")[1];var x =$("#TextBoxID").val();var regex =/^[a-zA-Z]+$/;if(!x.match(regex))
                    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";

Ejemplo 2: búsqueda de tablas de filtros

newVue(
  el:'#demo',

  data:
    sortKey:'name',
    reverse:false,
    searchName:'',
    searchOperator:'',
    searchAge:'',
    columns:['name','age'],
    newUser:,
    search:"",
    name:"",
    age:"",

    users:[ name:'John', age:50, name:'Jane', age:22, name:'Paul', age:34, name:'Kate', age:15, name:'Amanda', age:65, name:'Steve', age:38, name:'Keith', age:21, name:'Don', age:50, name:'Susan', age:21],
  methods:sortBy:function(sortKey)this.reverse=(this.sortKey== sortKey)?!this.reverse:false;this.sortKey= sortKey;,filterByName:function(user)// no search, don't filter : if(this.searchName.length===0)returntrue;return(user.name.toLowerCase().indexOf(this.searchName.toLowerCase())>-1);,filterByAge:function(user),orderBy:function(userA, userB)let condition =(userA[this.sortKey]> userB[this.sortKey]);if(this.reverse)return!condition;elsereturn condition;,
  computed:filteredPersons:function()returnthis.users.filter(this.filterByName).filter(this.filterByAge).sort(this.orderBy);,);

Calificaciones y reseñas

Más adelante puedes encontrar las interpretaciones de otros sys admins, tú además tienes la opción de mostrar el tuyo si te gusta.

---

---

Utiliza Nuestro Buscador