0
149
ViewsMarcar resultados de búsqueda con JavaScript
Creé una barra de búsqueda que toma todo lo que se escribe y verifica si el archivo json tiene el nombre, el autor o la categoría que coincide con él.
¿Cómo podría hacer que todo lo que se escribe en la barra de búsqueda se resalte en la parte donde se muestran los resultados coincidentes?
Aquí hay una imagen de la barra de búsqueda, por ejemplo. Escribí FPS y encontró una categoría con FPS. Me gustaría que se resaltara la parte de fps.
Cómo hice funcionar la barra de búsqueda:
const search = document.getElementById("search"); const matchList = document.getElementById("match-list"); const searchStates = async searchText => { const res = await fetch("firebase link"); const states = await res.json(); const listaInformacija2 = Object.values(states) let matches = listaInformacija2.filter(state => { const regex = RegExp(`^${searchText}`, "gi"); return state.autor.match(regex) || state.naziv.match(regex) || state.kategorija.match(regex); }); if(searchText.length === 0) { matches = [] matchList.innerHTML = ""; } outputHtml(matches); }; const outputHtml = matches => { if(matches.length > 0){ const html = matches.map(match => ` <a href=kurs.html?id=${match.id} id="searchedLink"> <div class="course-col" id="allCourses"> <h4>${match.naziv}</h4> <p>Kategorija: ${match.kategorija}</p> <p>Autor: ${match.autor}</p> </div> </a> `).join(""); matchList.innerHTML = html; } } search.addEventListener("input", () => searchStates(search.value));
·
Juan Pablo Isaza
1 answers
Answer question0
Puede agregar un elemento de span específico al texto resaltado dinámicamente, también evitaría hacer una llamada de Firebase en cada búsqueda, ya que costaría mucho dinero si la aplicación escalara, esto es lo que obtuve:
const FIREBASE_URL = '<your firebase url>'; const $search = document.getElementById('search'); const $matchList = document.getElementById('match-list'); const data = {}; function escape(str) { return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } function search(query) { if (!query || !data.statesList) return []; const matches = data.statesList.filter(state => query.test(state.autor) || query.test(state.naziv) || query.test(state.kategorija)); return matches; } function render(matches, originalValue, query) { if (!matches.length) { $matchList.innerHTML = ''; return; } const html = matches .map(match => { const replacer = `<span class="search-match">${originalValue}</span>`; return ` <a href=kurs.html?id=${match.id} class="searchedLink"> <div class="course-col" class="allCourses"> <h4>${match.naziv.replace(query, replacer)}</h4> <p>Kategorija: ${match.kategorija.replace(query, replacer)}</p> <p>Autor: ${match.autor.replace(query, replacer)}</p> </div> </a>`; }) .join(''); $matchList.innerHTML = html; } function inputHandler(event) { const { value } = event.target; let query; if (!value) query = null; else query = new RegExp(escape(value), 'i'); const matches = search(query); render(matches, value, query); } async function init() { const response = await fetch(FIREBASE_URL); data.states = await response.json(); data.statesList = Object.values(data.states); $search.addEventListener('input', inputHandler); } init().catch(console.error);Y su CSS podría verse así:
.search-match { background-color: #e0d392f0; }
·
Juan Pablo Isaza
Report
Answer question