Hello.

My task is to screen out students with names that are not appropriate for what I enter in input. Those. if I start typing the name with the letter "B", then all "Alexey" are eliminated, etc. When I start typing the name into input, I get an error saying that the .length text variable (where all of the input is written to) is undefined . And further as you enter, nothing changes and does not work. What is the problem?

 (function() { var app = angular.module('app', []); app.controller('DataController', function() { this.students = gems; this.compare = function() { for (var i = 0; i < this.text.length; i++) { if (this.text[i] == this.students.name[i]) { alert(this.text); return true; } } } }); var gems = [{ name: 'Azurite', price: 2.95 }, { name: 'Bloodstone', price: 5.95 }, { name: 'Zircon', price: 3.95 }]; }()); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="container-fluid"> <div class="row-fluid"> <input class="col-md-12 col-xs-12" type="text" placeholder="Search people by name..." ng-model='text' ng-change='data.students.name'> <div class="buttons"> <button class="btn btn-sort">Sort by name</button> <button class="btn btn-sort">Sort by age</button> <button ng-click='data.click()' class="btn btn-danger">Reset</button> </div> </div> <!--Main content--> <div class="main-table col-sm-8 col-md-7 col-md-offset-1 col-lg-7 col-lg-offset-1"> <table class="table table-hover"> <thead> <tr> <th class="text-center">Image</th> <th>Name</th> <th>Age</th> <th>Phone</th> </tr> </thead> <tbody ng-repeat='student in data.students' ng-show='data.compare()'> <tr> <td> <img src="/img/cat.svg" alt=""> </td> <td>{{student.name}}</td> <td>41</td> <td>sieg@example.com</td> </tr> </tbody> </table> </div> </div>

  • Can I suggest an option on jQuery? - Yuri
  • Let's. Though I know jquery, I will look at the logic. - Vlad Gritsenko

1 answer 1

I offer my solution in pure JavaScript:

 var input = document.getElementById('name'); input.onkeyup = function() { var tr = document.querySelectorAll('.table tbody tr'); for(var i = 0; i < tr.length; i++){ // Создаём регулярное выражение: строка должна начинаться со значения указанного в input var regexp = new RegExp('^'+this.value.toLowerCase()+'.*$', 'i'); // Проверяем, начинается ли она со значения указанного в input if(regexp.exec(tr[i].getElementsByTagName('td')[1].innerHTML.toLowerCase())){ // toLowerCase() нежно, что бы воспринимало любой регистр tr[i].style.display = 'table-row'; // Показываем соответствующие строки }else{ tr[i].style.display = 'none'; // Скрываем строки, которые не подходят }; }; }; 
 <table class="table table-hover"> <thead> <tr> <th class="text-center">Image</th> <th>Name</th> <th>Age</th> <th>Phone</th> </tr> </thead> <tbody ng-repeat='student in data.students' ng-show='data.compare()'> <tr> <td> <img src="https://i.stack.imgur.com/WZsJn.jpg?s=32&g=1" alt=""> </td> <td>Юрий</td> <td>17</td> <td>yurka_mail@ukr.net</td> </tr> <tr> <td> <img src="https://www.gravatar.com/avatar/6a2ebc4c3e8238a0f205e9cf32e4fb92?s=32&d=identicon&r=PG&f=1" alt=""> </td> <td>Александр</td> <td>25</td> <td>sieg@example.com</td> </tr> <tr> <td> <img src="https://www.gravatar.com/avatar/8ae54a5fe67401eabebeff0a86d82dba?s=32&d=identicon&r=PG&f=1" alt=""> </td> <td>Иван</td> <td>12</td> <td>sieg@example.com</td> </tr> <tr> <td> <img src="https://www.gravatar.com/avatar/026c32d1335230193ba501286b809d5c?s=32&d=identicon&r=PG&f=1" alt=""> </td> <td>Василий</td> <td>37</td> <td>sieg@example.com</td> </tr> <tr> <td> <img src="https://www.gravatar.com/avatar/2a246ffd14ebccdbee907e96647eee52?s=32&d=identicon&r=PG&f=1" alt=""> </td> <td>Виктор</td> <td>14</td> <td>sieg@example.com</td> </tr> </tbody> </table> <p> <div>Введите имя:</div> <input type="text" id="name"> </p>