I have created a search bar using Bootstrap. The search is this:
<div class="md-form mt-0">
<input class="form-control" id="myInput" type="text" placeholder="Search" aria-label="Search">
</div>
I have as well those four anchor tags:
<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>
What I want to accomplish is whenever I write on my search bar the name inside of the anchor tag (for example Joli Cafe) would filter the anchor tag and show me the specific cafe. Is there any way I can accomplish that?
Consider using the <datalist> element. The input field can be connected to a datalist using the list="" property.
If you assign each option a data attribute with a custom URL (assuming you want it to act as an anchor tag), then you can use JavaScript to get the selected option and its data attribute. Once you have that, you can use window.location with the data attribute value to go to that 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>Create an event listener with .on('input'...) that looks at the search value, and hides or shows each <a> based on whether its inner HTML contains the search value:
$('#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>