Trying to develop my own search bar on my store by using the search bar they provide, the only issue I'm facing right now is the "predictive.search" that appears under the custom search bar when the user enters the product they are searching.
So far the search bar CSS is done, I just can't find the element class to copy over the "predictive.search" I was goin to ask what would be better to do this? I have access to the search liquid file or is it better to create my search bar using the existing elements?
<div class="custom-search-bar">
<form action="{{ routes.search_url }}" method="get">
<input type="text" name="q" placeholder="🔍 What can we help you find?" aria-label="Search" class="search-input" id="custom-search-input" />
<button type="submit" class="search-button">➤</button>
</form>
</div>
<div class="predictive-search predictive-search--header" id="predictive-search-box" tabindex="-1" style="display: none;">
<div id="predictive-search-results" role="listbox">
<div id="predictive-search-results-groups-wrapper" class="predictive-search__results-groups-wrapper">
<div class="predictive-search__result-group">
<h2 id="predictive-search-queries" class="predictive-search__heading">Suggestions</h2>
<ul id="predictive-search-results-queries-list" class="predictive-search__results-list" role="group" aria-labelledby="predictive-search-queries">
<!-- Suggestions will be populated here -->
</ul>
</div>
<div class="predictive-search__result-group">
<h2 id="predictive-search-products" class="predictive-search__heading">Products</h2>
<ul id="predictive-search-results-products-list" class="predictive-search__results-list" role="group" aria-labelledby="predictive-search-products">
<!-- Products will be populated here -->
</ul>
</div>
</div>
</div>
<div id="predictive-search-option-search-keywords" class="predictive-search__search-for-button">
<button class="predictive-search__item predictive-search__item--term link link--text h5 animate-arrow" tabindex="-1" role="option" aria-selected="false">
<span data-predictive-search-search-for-text="">Search for “shirt”</span>
<svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor"></path>
</svg>
</button>
</div>
</div>
<style>
/* Main search bar styling */
.custom-search-bar {
display: flex;
align-items: center;
position: absolute;
top: 85px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.search-input {
width: 500px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.search-button {
padding: 8px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.search-button:hover {
background-color: #0056b3;
}
/* Predictive search box styling */
.predictive-search {
position: absolute;
top: 135px;
left: 50%;
transform: translateX(-50%);
background-color: #151515;
border: 1px solid #ccc;
border-radius: 4px;
width: 715px;
z-index: 9;
}
/* Result groups and items */
.predictive-search__result-group {
padding: 10px;
}
.predictive-search__heading {
font-size: 14px;
margin-bottom: 10px;
color: #fff;
text-transform: uppercase;
}
.predictive-search__results-list {
list-style: none;
padding: 0;
margin: 0;
}
.predictive-search__list-item {
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.predictive-search__item-content {
display: flex;
align-items: center;
}
.predictive-search__image {
margin-right: 10px;
}
.predictive-search__item-heading {
font-size: 16px;
color: #fff;
}
.predictive-search__list-item:hover {
background-color: #f8f8f8;
}
.predictive-search__results-list {
overflow-x: hidden;
max-height: 300px;
overflow-y: auto;
}
</style>
<script>
document.getElementById('custom-search-input').addEventListener('input', function() {
var searchBox = document.getElementById('predictive-search-box');
if (this.value.length > 0) {
searchBox.style.display = 'block';
fetchPredictiveSearchResults(this.value);
} else {
searchBox.style.display = 'none';
}
});
function fetchPredictiveSearchResults(query) {
fetch(\/search/suggest?q=${query}&resources[type]=product,collection,page`)`
.then(response => response.json())
.then(data => {
const suggestions = data.resources.results.queries;
const products = data.resources.results.products;
const collections = data.resources.results.collections;
displayResults(suggestions, products, collections, query);
});
}
function displayResults(suggestions, products, collections, query) {
const suggestionsList = document.getElementById('predictive-search-results-queries-list');
const productsList = document.getElementById('predictive-search-results-products-list');
const searchForButton = document.querySelector('[data-predictive-search-search-for-text]');
// Clear previous results
suggestionsList.innerHTML = '';
productsList.innerHTML = '';
// Populate suggestions
suggestions.forEach(suggestion => {
const li = document.createElement('li');
li.className = 'predictive-search__list-item';
li.innerHTML = \<a href="/search?q=${encodeURIComponent(suggestion.text)}" class="predictive-search__item link link--text" tabindex="-1">`
<div class="predictive-search__item-content predictive-search__item-content--centered">
<p class="predictive-search__item-heading h5">${suggestion.styled_text}</p>
</div>
</a>\;`
suggestionsList.appendChild(li);
});
// Populate products
products.forEach(product => {
const li = document.createElement('li');
li.className = 'predictive-search__list-item';
li.innerHTML = \<a href="${product.url}" class="predictive-search__item predictive-search__item--link-with-thumbnail link link--text" tabindex="-1">`
<img class="predictive-search__image" src="${product.featured_image}" alt="${product.title}" width="50" height="50">
<div class="predictive-search__item-content">
<p class="predictive-search__item-heading h5">${product.title}</p>
</div>
</a>\;`
productsList.appendChild(li);
});
// Update the search button text
searchForButton.textContent = \Search for “${query}”`;`
}
</script>
