search functionality for html table on text box

1BY LOVE SINGH,
2Call this function onKeyUp event of TEXTBOX.
3
4function myFunction() {
5            var input, filter, table, tr, td, i;
6            input = document.getElementById("TextBoxID");
7            filter = input.value.toUpperCase();
8            table = document.getElementById("TableID");
9            tr = table.getElementsByTagName("tr");
10            for (i = 0; i < tr.length; i++) {
11                td = tr[i].getElementsByTagName("td")[1];
12                var x = $("#TextBoxID").val();
13                var regex = /^[a-zA-Z]+$/;
14                if (!x.match(regex)) {
15                    td = tr[i].getElementsByTagName("td")[0];
16                }
17                if (td) {
18                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
19                        tr[i].style.display = "";
20                    } else {
21                        tr[i].style.display = "none";
22                    }
23                }
24            }
25        }

1BY LOVE SINGH,
2Call this function onKeyUp event of TEXTBOX.
3
4function myFunction() {
5            var input, filter, table, tr, td, i;
6            input = document.getElementById("TextBoxID");
7            filter = input.value.toUpperCase();
8            table = document.getElementById("TableID");
9            tr = table.getElementsByTagName("tr");
10            for (i = 0; i < tr.length; i++) {
11                td = tr[i].getElementsByTagName("td")[1];
12                var x = $("#TextBoxID").val();
13                var regex = /^[a-zA-Z]+$/;
14                if (!x.match(regex)) {
15                    td = tr[i].getElementsByTagName("td")[0];
16                }
17                if (td) {
18                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
19                        tr[i].style.display = "";
20                    } else {
21                        tr[i].style.display = "none";
22                    }
23                }
24            }
25        }
26

1new Vue({
2  el: '#demo',
3
4  data: {
5    sortKey: 'name',
6    reverse: false,
7    searchName: '',
8    searchOperator: '',
9    searchAge: '',
10    columns: ['name', 'age'],
11    newUser: {},
12    search: "",
13    name: "",
14    age: "",
15
16    users: [
17      { name: 'John', age: 50 },
18      { name: 'Jane', age: 22 },
19      { name: 'Paul', age: 34 },
20      { name: 'Kate', age: 15 },
21      { name: 'Amanda', age: 65 },
22      { name: 'Steve', age: 38 },
23      { name: 'Keith', age: 21 },
24      { name: 'Don', age: 50 },
25      { name: 'Susan', age: 21 }
26    ]
27  },
28  methods: {
29    sortBy: function (sortKey) {
30      this.reverse = (this.sortKey == sortKey) ? !this.reverse : false;
31
32      this.sortKey = sortKey;
33    }, 
34    filterByName : function(user) {
35      // no search, don't filter : 
36      if (this.searchName.length === 0) {
37        return true;
38      }
39
40      return  (user.name.toLowerCase().indexOf(this.searchName.toLowerCase()) > -1);
41    }, 
42    filterByAge : function (user) {
43      // no operator selected or no age typed, don't filter : 
44      if (this.searchOperator.length === 0 || this.age.length === 0) {
45        return true;
46      }
47
48      if (this.searchOperator === '>') {
49        return (user.age > this.age); 
50      } else  if (this.searchOperator === '<') {
51        return (user.age < this.age);
52      }      
53    }, 
54    orderBy : function (userA, userB) {
55      let condition = (userA[this.sortKey] > userB[this.sortKey]);
56      if (this.reverse) {
57        return !condition;
58      } else {
59        return condition;
60      }
61    }
62  },
63  computed: {
64    filteredPersons: function () {
65      return this.users
66      .filter(this.filterByName)
67      .filter(this.filterByAge)
68      .sort(this.orderBy);
69    }
70  },  
71});