Реализация подсказок при поиске с использованием Vue.js

Введение

В этом проекте вы научитесь реализовывать функцию подсказок при вводе поиска с использованием Vue.js 2.x. Эта функция широко используется в веб-приложениях для предоставления пользователям списка совпадающих данных при их вводе в поле поиска.

👀 Превью

🎯 Задачи

В этом проекте вы научитесь:

• Как сделать заглавной первую букву в названиях столбцов в таблице данных
• Как реализовать функциональность подсказок при поиске на основе ввода пользователя

🏆 Достижения

После завершения этого проекта вы сможете:

• Управлять DOM с использованием директив Vue.js, таких как v-for и v-model
• Создавать вычисляемые свойства в Vue.js для фильтрации и отображения результатов поиска
• Применять базовые стили к таблице и полю поиска

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── index.html
└── js
    └── vue.js

В них:

• js/vue.js - файл Vue 2.x.
• index.html - код разметки страницы и логики функциональной реализации.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Функция подсказок при поиске еще не реализована.

Привести заголовки таблицы к верхнему регистру

В этом шаге вы научитесь переводить первую букву заголовка таблицы в верхний регистр.

1. Откройте файл index.html в вашем редакторе кода.
2. Найдите раздел с заголовками таблицы в коде HTML:

<thead>
  <tr>
    <td v-for="col in columns">
      {{col.slice(0,1).toUpperCase() + col.slice(1)}}
    </td>
  </tr>
</thead>

3. Директива v-for используется для перебора массива columns и отображения соответствующих заголовков таблицы. Код {{col.slice(0,1).toUpperCase() + col.slice(1)}} используется для перевода первой буквы каждого имени столбца в верхний регистр.

   • col.slice(0,1) извлекает первый символ имени столбца.
   • .toUpperCase() переводит первый символ в верхний регистр.
   • + col.slice(1) объединяет заглавную первую букву с остальной частью имени столбца.

4. Сохраните файл index.html и обновите страницу. Теперь вы должны увидеть заголовки таблицы с первой буквой, переведенной в верхний регистр.

Реализовать подсказки при поиске

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

1. В файле index.html найдите поле поиска и соответствующий код Vue.js и добавьте следующий код:

<span>Search for names: </span>
<!-- Add v-model code -->
<input placeholder="Enter the name to search" v-model="searchQuery" />

data: {
  searchQuery: "",
  //... other data properties
},

// The following code is the code that needs to be added
computed: {
  newData() {
    return this.data.filter((item) => {
      return item.name
     .toLowerCase()
     .includes(this.searchQuery.toLowerCase());
    });
  }
}

2. Свойство данных searchQuery связано с полем поиска с использованием директивы v-model. Это позволяет экземпляру Vue.js отслеживать ввод пользователя.
3. Вычисляемое свойство newData фильтрует массив data на основе значения searchQuery. Он проверяет, содержит ли свойство name каждого элемента данных поисковый запрос (без учета регистра).
4. Затем отфильтрованные данные отображаются в теле таблицы:

<tbody>
  <tr v-for="entry in newData">
    <td v-for="col in columns">{{entry[col]}}</td>
  </tr>
</tbody>

5. Директива v-for используется для перебора массива newData и отображения каждого элемента данных в строке таблицы.
6. Сохраните файл index.html и обновите страницу. Теперь вы должны быть able to see the search suggestions functionality working as expected.

Now, you have completed the implementation of the input search suggestions feature in the provided Vue.js project. The finished result is as follows:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.