Ionic Search Bar - Приоритет результатов поиска - PullRequest
Новая
       7

Ionic Search Bar - Приоритет результатов поиска

0 голосов
/ 21 декабря 2018

У меня есть набор Items в массиве.

Давайте назовем его fruitArray. 

fruitArray = ['Orange', 'Banana', 'Pear', 'Tomato', 'Grape', 'Apple', 'Cherries', 'Cranberries', 'Raspberries', 'Strawberries', 'Watermelon'];

Теперь я выполняю обычную операцию поиска в Ionic.

, когда явведите значение ' ap ' в поле поиска. Отфильтрованный список отображает элементы в следующем порядке -

Gr ap e

Ap ple

Это обычный поиск.

В моем случае я хочу, чтобы мой список изменил порядок отображения списка.

Ap ple

Gr ap e

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

Заранее спасибо.

1 Ответ

0 голосов
/ 21 декабря 2018

Вот один из способов сделать это:

В своем .html добавьте строку поиска 

<ion-toolbar class="subtoolbarsearch">
    <ion-searchbar autocorrect="true" placeholder="Look for a fruit" [(ngModel)]="search" (ionInput)="getItems($event)"></ion-searchbar>
</ion-toolbar>

. В ваших .ts используйте 2 переменные, одна из которых содержит все ваши фрукты, иngModel вашей панели поиска 

public fruits;
public search: string = "";

Добавьте функцию, которая установит фрукты 

getFruits(){
    this.fruits = ['Orange', 'Banana', 'Pear', 'Tomato', 'Grape', 'Apple'];
 }

Вызовите если из вашего конструктора инициализировать переменную класса фруктов

Функция наконец, котораясрабатывает при вводе в строку поиска 

getItems(ev) {

    this.getFruits(); // Display all the fruits

    let val = ev.target.value; // Getting the input

    // If searchbar is empty, do nothing
    if (val && val.trim() != '') {

        // Remove unmatching fruits
        for (let i = 0; i < this.fruits.length; i++) {
          let pos1 = this.fruits[i].toLowerCase().indexOf(val.toLowerCase());
          if (pos1 == -1) {
            this.fruits.splice(i, 1); // If substring not found, we remove the fruit from displayFruits
            i--; // Do not forget to decrement i by one since we removed one element from the array
          }else if(pos1 == 0){
            // If substring is at the beginning of the fruit name, we remove the fruit from the array, and we add it at the beginning of it
            let fruit = this.fruits[i];
            this.fruits.splice(i,1);
            this.fruits.unshift(fruit);
          }
        }
    }
}
...