javascript de barra de búsqueda dinámica para ejemplo de código de tabla

Hola, encontramos la respuesta a lo que estabas buscando, continúa leyendo y la encontrarás más abajo.

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

BY LOVE SINGH,
Call this function onKeyUp event of TEXTBOX.

function myFunction() 
            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 en la tabla de filtros

new Vue(
  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) 
        return true;
      

      return  (user.name.toLowerCase().indexOf(this.searchName.toLowerCase()) > -1);
    , 
    filterByAge : function (user) 
      // no operator selected or no age typed, don't filter : 
      if (this.searchOperator.length === 0 ,orderBy:function(userA,userB)letcondition= (userA[this.sortKey]> userB[this.sortKey]);
      if (this.reverse) 
        return !condition;
       else 
        return condition;
      
    
  ,
  computed: 
    filteredPersons: function () 
      return this.users
      .filter(this.filterByName)
      .filter(this.filterByAge)
      .sort(this.orderBy);
    
  ,  
);

---

---

Utiliza Nuestro Buscador