Получение панели поиска для работы на веб-странице с помощью javascript

Question

Я пытаюсь создать список профилей с панелью поиска, чтобы люди могли искать определенного пользователя c, однако панель поиска, похоже, не работает, и я получаю имена пользователей профиля в одну строку, а не чтобы видеть одну строку для каждого имени пользователя.

Это то, что у меня есть в моем js:

angular.module('ionicApp', ['ionic'])

.service('MentorFinder', function() {

  return {
    get: function() {

      var mentors = [
          document.getElementById('mentor_list')
      ]

      return mentors;
    }
  }
})

.controller('pageController', function($scope, MentorFinder) {

  var mentors = MentorFinder.get();

  $scope.data = {
    mentors: mentors,
    searchQuery: ''
  };

  $scope.findMentors = function() {
    var searchQuery = $scope.data.searchQuery.toLowerCase();

    var filteredMentors = [];

    for (i = 0; i < mentors.length; i++) {
      if ( mentors[i].name.toLowerCase().indexOf(searchQuery) !== -1 ) {
        filteredMentors.push(mentors[i])
      }
    }

    $scope.data.mentors = filteredMentors;
  }

  $scope.clearSearch = function() {
    $scope.data.searchQuery = '';
  }
})

и моем html:

  <ion-list id="mentor_list">
    <ion-item ng-repeat="mentor in data.mentors">
        {% for user in mentors %}
        {{ user.first_name }} {{ user.last_name }}
        {% endfor %}
        </ion-item>
  </ion-list>

ОБНОВЛЕНИЕ

На основании полученного ответа я внес следующие изменения в свой js

angular.module('ionicApp', ['ionic'])

.service('MentorFinder', function() {
    const ionItems = document.querySelectorAll('#mentor_list ion_item');
    const names = Array.from(ionItems).map(ii => ii.innerHTML);
})

.controller('pageController', function($scope, MentorFinder) {

  var mentors = MentorFinder.get();

  $scope.data = {
    mentors: mentors,
    searchQuery: ''
  };

  $scope.findMentors = function() {
    var searchQuery = $scope.data.searchQuery.toLowerCase();

    var filteredMentors = [];

    for (i = 0; i < mentors.length; i++) {
      if ( mentors[i].name.toLowerCase().indexOf(searchQuery) !== -1 ) {
        filteredMentors.push(mentors[i])
      }
    }

    $scope.data.mentors = filteredMentors;
  }

  $scope.clearSearch = function() {
    $scope.data.searchQuery = '';
  }
})

Сейчас я получаю строку поиска, но, похоже, не могу вернуть любое имя пользователя, если я введу значение в строке поиска. Я не вижу список пользователей в моем списке

Answer 1

Вы можете использовать каналы для фильтрации вашей модели searchQuery ng.

`
<ion-list id="mentor_list">
    <ion-item ng-repeat="mentor in data.mentors | filter:searchQuery">
        {{ mentor.first_name }} {{ mentor.last_name }}
    </ion-item>
</ion-list>
`

Answer 2

document.getElementById('mentor_list') возвращает вам HTMLElement, который вы затем заключаете в массив. Если вам нужны имена - внутренние HTML элементов ion-list - тогда вам нужно извлечь имена из #mentor_list ion-items.

Вот упрощенная версия того, как это сделать минус фильтр. (И FWIW, вы можете немного упростить свой код, используя Array#filter.)

const ionItems = document.querySelectorAll('#mentor_list ion-item');
const names = Array.from(ionItems).map(ii => ii.innerHTML);

console.log(names);

<ion-list id="mentor_list">
  <ion-item>Mickey Mouse</ion-item>
  <ion-item>Donald Duck</ion-item>
</ion-list>

Вот пример с AngularJS.

angular.module('ionicApp', [])

.service('MentorFinder', function() {

  return {
    get: function() {
      const ionItems = document.querySelectorAll('#mentor_list ion-item');

      return Array.from(ionItems).map(ii => ii.innerHTML);
    }
  }
})

.controller('pageController', function($scope, MentorFinder) {

  var mentors = MentorFinder.get();

  $scope.data = {
    mentors: mentors,
    searchQuery: ''
  };

  $scope.findMentors = function() {
    var searchQuery = $scope.data.searchQuery.toLowerCase();

    $scope.data.mentors = mentors
      .filter(mentor => mentor.toLowerCase().indexOf(searchQuery) !== -1);
  }

  $scope.clearSearch = function() {
    $scope.data.searchQuery = '';
  }
})

<ion-list id="mentor_list">
  <ion-item>Mickey Mouse</ion-item>
  <ion-item>Donald Duck</ion-item>
</ion-list>

<div ng-app="ionicApp" ng-controller="pageController">
  <input type="text" ng-model="data.searchQuery">
  <br>
  <button ng-click="findMentors()">Find</button>
  <br>
  <ion-list>
    <ion-item ng-repeat="mentor in data.mentors">{{mentor}}</ion-item>
  </ion-list>
</div>

<script data-require="angular.js@1.7.8" data-semver="1.7.8" src="https://code.angularjs.org/1.7.8/angular.min.js"></script>

Обратите внимание, что names не разбивается на кортежи firstName-lastName в моем примере, поэтому я немного изменил логи фильтра c.

Также обратите внимание, что у меня есть два списка наставников. В вашем коде похоже, что вы выполняете какую-то серверную визуализацию начального списка.

    {% for user in mentors %}
    {{ user.first_name }} {{ user.last_name }}
    {% endfor %}

Если вы используете директиву ngRepeat на сгенерированном сервером ion-list, тогда список будет уничтожен, как только произойдет цикл дайджеста. Итак, у вас есть сценарий "курица и яйцо", и поэтому я добавил два <ion-list>, чтобы помочь прояснить.