He creado una barra de búsqueda usando Bootstrap. La búsqueda es esta:
<div class="md-form mt-0"> <input class="form-control" id="myInput" type="text" placeholder="Search" aria-label="Search"> </div>También tengo esas cuatro etiquetas de anclaje:
<a class="article-link" href="https://www.anafiotika.gr/el/">Anafiotika Cafe-Restaurant</a> <a class="article-link" href="https://www.anafiotika.gr/el/">Joli Cafe</a> <a class="article-link" href="https://www.anafiotika.gr/el/">Five Guys Burger House</a> <a class="article-link" href="https://www.anafiotika.gr/el/">ATH Cafe Bar</a>Lo que quiero lograr es que cada vez que escribo en mi barra de búsqueda el nombre dentro de la etiqueta de anclaje (por ejemplo, Joli Cafe) filtre la etiqueta de anclaje y me muestre el café específico. ¿Hay alguna manera de que pueda lograr eso?
Considere usar el elemento <datalist> . El campo de entrada se puede conectar a una lista de datos usando la propiedad list="" .
Si asigna a cada opción un atributo de datos con una URL personalizada (suponiendo que desea que actúe como una etiqueta de anclaje), puede usar JavaScript para obtener la opción seleccionada y su atributo de datos. Una vez que tenga eso, puede usar window.location con el valor del atributo de datos para ir a esa URL.
const searchInput = document.getElementById("searchInput"); const datalist = document.querySelectorAll('#theRestaurants > option'); const searchArray = []; // Check which datalist options have a URL data attribute. Push them to the searchArray datalist.forEach((item) => { if(item.dataset.url) { searchArray.push(item); } }) // Listen for changes to the input. Loop over out search array. searchInput.addEventListener('input', () => { searchArray.forEach(element => { // If out search input matches an option with a URL, send user to relevant URL if(searchInput.value === element.value) { window.location = element.dataset.url; } }); }); <div class="md-form mt-0"> <input type="text" list="theRestaurants" name="restaurant" id="searchInput" placeholder="Search" aria-label="Search" value=""> <datalist id="theRestaurants"> <option value="Anafiotika Cafe-Restaurant" data-url="#acr"> <option value="Joli Cafe" data-url="#jc"> <option value="Five Guys Burger House" data-url="#fgbh"> <option value="ATH Cafe Bar" data-url="#acb"> </datalist> </div>Cree un detector de eventos con .on('input'...) que mire el valor de búsqueda y oculte o muestre cada <a> en función de si su HTML interno contiene el valor de búsqueda:
$('#myInput').on('input', function() { let name = $(this).val() $('.article-link').each(function() { if ($(this).html().toUpperCase().includes(name.toUpperCase())) { $(this).show() } else { $(this).hide() } }) }); <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <div class="md-form mt-0"> <input class="form-control" id="myInput" type="text" placeholder="Search" aria-label="Search"> </div> <a class="article-link" href="https://www.anafiotika.gr/el/">Anafiotika Cafe-Restaurant</a> <a class="article-link" href="https://www.anafiotika.gr/el/">Joli Cafe</a> <a class="article-link" href="https://www.anafiotika.gr/el/">Five Guys Burger House</a> <a class="article-link" href="https://www.anafiotika.gr/el/">ATH Cafe Bar</a>