Итак, вы хотите выполнить поиск по базе данных?
Что вам понадобится:
Файл db.json (для этого примера), ФАЙЛ HTML и файл JavaScript,
Внутри этих файлов вы найдете:
1. Пара функций,
2. Форма
3. База данных для поиска.
4. Терпение.
Мы можем настроить репозиторий на GitHub, для этого вам понадобится учетная запись. Чтобы получить помощь в создании репо, вы можете выполнить следующие шаги¹.
После того, как вы создали свое репо, не стесняйтесь следовать за ним!
Нам понадобится заполненный файл db.json. Если вы хотите получить аналогичный результат, скопируйте его в пустой файл db.json:
{ "books": [ { "id": "0", "title": "No Longer Human", "author": "Osamu Dazai", "copies": "3", "img_front": "https://books.google.com/books/content?id=9jhi2bY3GkAC&pg=PP1&img=1&zoom=3&hl=en&bul=1&sig=ACfU3U2wW-asLm_gIUiV4e5JmKsFeePHJA&w=1280" }, { "id": "1", "title": "Between Two Fires", "author": "Christopher Buehlman", "copies": "1", "img_front": "https://m.media-amazon.com/images/I/61Nxq9EvcKL.jpg" }, { "id": "2", "title": "The Emperor of All Maladies", "author": "Siddhartha Mukherjee", "copies": "1", "img_front": "https://m.media-amazon.com/images/I/51qcgiTZOiL.jpg" } ] }
Хлеб с маслом
ФОРМУЛИРУЙТЕ:
Сначала нам понадобится форма. Эта форма будет принимать значение (то, что вы ищете). Не стесняйтесь называть это как угодно.
Вот пример формы, которую вы можете поместить в свой HTML-файл, я включу шаблон, необходимый для HTML-файла:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A Simple Search Tutorial</title> <script defer src="index.js"></script> </head> <body> <div class="search-field"> <form id="search-form"> <input type="text" id="search" name="search" placeholder="Type what you want to search here! …"> <input type="submit" value="Search" /> </form> </div> <div id="appendMe"> </div> </body> </html>
Взгляните на следующую строку, прежде чем мы расширим нашу форму и значения, которые нам понадобятся от нее.
<script defer src="index.js"></script>
В некоторых HTML-файлах вы можете не увидеть атрибут defer, но в нашем случае он необходим. Это говорит вашему браузеру, что нам нужно дождаться анализа нашего контента, прежде чем он будет взаимодействовать с нашим файлом index.js.
Подробнее об отсрочке здесь².
В первую очередь мы сосредоточимся на идентификаторе формы и имени, которое мы ему дали. Это можно найти в этих двух строках:
<form id="search-form"> <input type="text" id="search" name="search" placeholder="Type what you want to search here! …">
Теперь, когда мы создали нашу форму, мы закончили с нашим файлом HTML. Давайте посмотрим на этот div в нашем элементе body:
<div id="appendMe"> </div>
Мы будем ссылаться на это позже как на способ добавления результатов поиска.
Давайте перейдем к нашему файлу JavaScript и назначим наши переменные, мы сделаем это глобально, чтобы избежать проблем с областью действия.
let searchBar = document.querySelector("#search-form") //We set our searchBar variable to grab the html element with an id of "search-form" let appendToMe = document.querySelector("#appendMe") //We set our appendToMe variable to grab the html element with an id of "appendMe" console.log(searchBar) // We console log EVERYTHING. This is the SAFEST way to ensure you're going down the right path. console.log(appendToMe)
Здесь мы дважды вызываем метод console.log(), передавая обе наши новые переменные, чтобы убедиться, что мы захватили правильный элемент.
Вы можете проверить это, открыв терминал в коде VS и запустив:
«explorer.exe ‹вашеимяфайла›.js»
Если вы нажмете F12 или щелкните правой кнопкой мыши в любом месте страницы и выберите «проверить», вы попадете в инструменты разработчика вашего браузера. В этом меню вы можете выбрать вкладку консоли и посмотреть наши console.logs!
Успех! Давайте перейдем к следующей части!
СЛУШАЙТЕ (не вы, код!)
Нам понадобится призыв к действию, поэтому давайте включим addEventListener с типом отправки и передадим событие в качестве объекта слушателя.
Если вы не знакомы с параметром события, вы можете прочитать больше здесь³.
Теперь мы можем взять нашу только что созданную переменную searchBar и добавить к ней addEventListener:
searchBar.addEventListener("submit", (e) => { // You use this addEventListener to get the value of what you input into the search form. We pass in the parameter E and make an arrow function. e.preventDefault() //call preventDefault on the event to prevent a refresh. console.log(e) //Console log here to make sure you're getting the event information. (If it returns something massive, you're on the right path) searchBooks(e) //This is a function we'll create next. We'll pass the event info into it. //Don't worry about this searchBooks function in this step quite yet. You can even comment it if that makes you more comfortable. })
Отсюда мы будем создавать функцию, о которой я сказал вам не беспокоиться. Не стесняйтесь раскомментировать функцию после того, как мы закончим, если вы решили закомментировать ее.
Хотя это может показаться много, мы можем следить за нашими комментариями, чтобы понять, что происходит.
Мы будем использовать следующее, если вам нужно освежить в памяти, не стесняйтесь сделать паузу здесь и вернуться после того, как вы закончите читать.
function searchBooks(e){ //create a FETCH to obtain the data located in the db.json fetch("http://localhost:3000/books") //Make sure to run json-server --watch db.json .then(resp => resp.json()) .then((books) => { //console.log(books) // This console.log will ONLY run when you SUBMIT. (Review the callback located in our addEventListener) let searchInquiry = e.target["search"].value.toLowerCase() //Lets make a variable to hold the content that's inputted into the search form. //console.log(searchInquiry) // Always console.log to make sure you’re grabbing the correct value, the value being //The logic is taking our data, now called books, and using the .filter method on it. We'll use .includes let filteredBooks = books.filter((book) => book.title.toLowerCase().includes(searchInquiry) || book.author.toLowerCase().includes(searchInquiry)) // if (filteredBooks.length === 0){ alert("Sorry, but we currently do not have this book available.") // If what you input doesn't match the database, for example "www" a popup will appear with a string! } else { filteredBooks.forEach(book => { //After filtering through the books and seeing if what is inputted into the searchInquiry matches what we have in our database (using include you can test for shorter answers.) postSearchData(book) //Every time you submit, this new function is ran, with the data that is being checked for above. }) } searchBar.reset() //Since our searchBar variable is globally scoped, we can also call it here. .reset() simply resets the form after you submit. })}
Давайте разберем, что здесь происходит.
Начнем с извлечения данных из нашей базы данных:
Вам нужно открыть экземпляр в терминале и выполнить следующую команду для локального запуска сервера: json-server --watch db.json
Если это не работает, возможно, вы еще не установили его. Вот отличный блог⁷ обязательно следите за ним, чтобы избежать проблем, пока мы продолжим.
function searchBooks(e){ //create a FETCH to obtain the data located in the db.json fetch("http://localhost:3000/books") //Make sure to run json-server --watch db.json .then(resp => resp.json()) .then((books) => { //console.log(books) // This console.log will ONLY run when you SUBMIT. (Review the callback located in our addEventListener) let searchInquiry = e.target["search"].value.toLowerCase() //Lets make a variable to hold the content that's inputted into the search form. //console.log(searchInquiry) // Always console.log to make sure you're grabbing the correct value, the value being }
Мы передаем наши данные и книги в стрелочную функцию. Мы закомментировали наш console.log здесь, но чтобы убедиться, что у вас есть данные, которые вы искали, НЕОБХОДИМО проверить это в инструментах разработчика.
Помните то событие, которое мы передали в наш submit-прослушиватель addEventListener? Выше вы увидите, что в функции searchBooks(e) мы передаем это событие в эту функцию! Это то, что дает нам возможность вытягивать значение (то, что мы вводим в поиск).
Чтобы настроить это значение, вы можете написать:
e.target.yourFormName.value.
Мы пошли дальше и установили его в переменную и включили имя нашей формы «поиск».
let searchInquiry = e.target["search"].value.toLowerCase() //Lets make a variable to hold the content that's inputted into the search form.
Хотя [" "] не требуется, это также не нарушит код и является хорошей практикой, когда вы видите имя с дефисом.
В конце нашей цепочки мы включаем метод .toLowerCase(), принимая все, что мы вводим в форму, и уменьшая регистр значения. Это упростит поиск по мере продвижения и позволит избежать проблем с чувствительностью к регистру. Чтобы узнать больше о методе .toLowerCase(), нажмите здесь⁸.
Давайте вызовем объявление еще одной переменной. В этой переменной мы вызовем .filter для наших исходных данных (книг). Мы проверим некоторые атрибуты по отдельности в новой книге. Мы можем сделать это несколькими способами, но мы будем использовать .includes() в конце нашей цепочки.
Внутри наших включений мы будем передавать то, что мы ищем, внутри ( ). Ты помнишь, что это было?
Подсказка: мы только что присвоили его переменной!
Вот как будет выглядеть следующая часть:
//The logic is taking our data, now called books, and using the .filter method on it. We'll use .includes let filteredBooks = books.filter((book) => book.title.toLowerCase().includes(searchInquiry) || book.author.toLowerCase().includes(searchInquiry)) if (filteredBooks.length === 0){ alert("Sorry, but we currently do not have this book available.") // If what you input doesn't match the database, for example "www" a popup will appear with a string! } else { filteredBooks.forEach(book => { //After filtering through the books and seeing if what is inputted into the searchInquiry matches what we have in our database (using include you can test for shorter answers.) postSearchData(book) //Every time you submit, this new function is ran, with the data that is being checked for above. }) } searchBar.reset() //Since our searchBar variable is globally scoped, we can also call it here. .reset() simply resets the form after you submit. })}
Теперь есть несколько вещей, о которых нам пока не нужно беспокоиться, у нас есть последняя функция, в которую мы будем создавать и передавать наши данные (книгу).
Важно отметить, что .toLowerCase(), поскольку мы также включили в нашу переменную searchInquiry, наш код теперь будет преобразовывать все в нижний регистр и будет легче сопоставлять все, что вы решите искать!
Вы также можете быть незнакомы с .reset(), очень простым методом, который мы можем вызвать непосредственно для переменной, которую мы установили равной строке поиска. Хотя документации не так много, вы можете узнать больше о .reset() здесь⁹.
Мы почти закончили! Держитесь, финиш уже не за горами!
Давайте посмотрим на наши результаты!
Давайте запишем эту последнюю функцию, чтобы мы могли, наконец, увидеть, как наша тяжелая работа приносит плоды!
function postSearchData(book){ //console.log(book) //One last console.log() to make sure we receive the book passed in our searchBooks function let postedResults = document.createElement("ul") postedResults.textContent = book.title appendToMe.appendChild(postedResults) }
Отсюда мы объявляем одну последнюю переменную, которая при вызове функции создает новый элемент неупорядоченного списка.
После его создания для переменных textContent устанавливается значение book.title ИЛИ (это будет ключ: значение, которое вы хотели бы видеть). В этом примере мы хотим, чтобы название книги, которую ищут, заполнило новый элемент.
Последний шаг — просто добавить новую переменную postResults в нашу глобальную переменную appendToMe!
Вуаля! Теперь каждый раз, когда вы нажимаете «Отправить» в строке поиска, будет создаваться новый HTML-элемент UL с соответствующим заголовком.
Примечание. В приведенном ниже фрагменте кода обратите внимание, что мы используем ИЛИ (Логическая документация ИЛИ¹⁰) для проверки совпадений как в book.title, так и в book.author! ОДНАКО, когда наши результаты заполняются и добавляются, мы заполняем только НАЗВАНИЕ книги. ВЫ НЕ ВИДИТЕ АВТОРА!
Как только страница обновится, ваши результаты не останутся, это будет блог на другой день!
let filteredBooks = books.filter((book) => book.title.toLowerCase().includes(searchInquiry) || book.author.toLowerCase().includes(searchInquiry))
Поздравляем! Вы успешно создали «простую» функцию поиска в своем репозитории! Поэкспериментируйте со своей собственной базой данных и изучите возможности!
Обложка
ЯСИР, МУХАММАД. “Пин на доске Искусство.” Pinterest, 20 мая 2023 г., pin.it/7E2iex0.
Ссылки
- «Создать репозиторий». Документы GitHub, docs.github.com/en/get-started/quickstart/create-a-repo. По состоянию на 19 мая 2023 г.
- МозДевНет. HTML: язык гипертекстовой разметки | MDN, developer.mozilla.org/en-US/docs/Web/HTML/Element/script. По состоянию на 19 мая 2023 г.
- МозДевНет. «HTMLFORMELEMENT: отправить событие — веб-API: MDN». Веб-API | MDN, developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event. По состоянию на 19 мая 2023 г.
- ReqBin, автор: «Как сделать запрос Get с помощью JavaScript?» ReqBin, 21 февраля 2023 г., reqbin.com/code/javascript/rftjizcl/javascript-get-request-example.
- МозДевНет. «Array.Prototype.Filter() — Javascript: MDN». JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter. По состоянию на 19 мая 2023 г.
- МозДевНет. «Array.Prototype.Includes() — Javascript: MDN». JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes. По состоянию на 19 мая 2023 г.
- Ваг, Авинаш. «Начало работы с сервером JSON». Сообщество разработчиков, 23 апреля 2023 г., dev.to/avinashvagh/json-server-getting-started-4475.
- МозДевНет. «String.Prototype.Tolowercase() — Javascript: MDN». JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase. По состоянию на 19 мая 2023 г.
- МозДевНет. «Htmlformelement: метод Reset () — веб-API: MDN». Веб-API | MDN, developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset. По состоянию на 19 мая 2023 г.
- МозДевНет. «Логическое или (||) — Javascript: MDN». JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR. По состоянию на 19 мая 2023 г.