Modify "Search Bar" and/or add custom liquid for custom search bar with "suggestion box"? Dawn

[Brian-A]

First, I know there are "search" apps but I added one that was really cool but it makes my website super slow, especially with everything I have on my homepage. So I'm trying to add a custom liquid search bar, or modify my existing one...

I added search bar a month ago instead of search icon and its working, only issue how small it is. When I try modifying the search bar it is a general class resulting other "search fields" getting modify too, causing glitchy overlap.

www.extremekool.com

Password01

I would like to extend the left padding out more so the bar isn't so small. 

 

But if I can rework the whole search bar from the ground up using custom liquid, I think that would do even better as the customization would be way more advanced. 

Earlier I tried to script a custom search bar using this code: it relays to the search page, except I'm having issues bringing over the default Shopify "suggestive box" to the code: 

this is the code I'm working on for the custom search box:

<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>

<!-- Predictive search results box -->
<div class="predictive-search predictive-search--header" id="predictive-search-box" tabindex="-1">
  <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">
          <!-- Example of a suggestion item -->
          <li id="predictive-search-option-query-1" class="predictive-search__list-item" role="option" aria-selected="false">
            <a href="/search?q=shirt&amp;_pos=1&amp;_psq=shirt&amp;_ss=e&amp;_v=1.0" class="predictive-search__item link link--text" tabindex="-1">
              <div class="predictive-search__item-content">
                <p class="predictive-search__item-heading">
                  <mark>shirt</mark>
                </p>
              </div>
            </a>
          </li>
          <!-- Repeat for additional suggestions -->
        </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">
          <!-- Example of a product item -->
          <li id="predictive-search-option-product-1" class="predictive-search__list-item" role="option" aria-selected="false">
            <a href="/products/mens-elegant-golf-polo-shirt-turtle-bay-copy?_pos=1&amp;_psq=shirt&amp;_ss=e&amp;_v=1.0" class="predictive-search__item predictive-search__item--link-with-thumbnail link link--text" tabindex="-1">
              <img class="predictive-search__image" src="//cdn.shopify.com/s/files/1/0894/1148/5978/files/palmera_white_4x5_web.jpg?v=1723506290&amp;width=150" alt="Men's Elegant Polo Shirt Palmera" width="50" height="50">
              <div class="predictive-search__item-content">
                <p class="predictive-search__item-heading">Men's Elegant Polo Shirt Palmera</p>
              </div>
            </a>
          </li>
          <!-- Repeat for additional products -->
        </ul>
      </div>
    </div>
  </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: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 500px;
    z-index: 9;
    display: none;
}

/* Result groups and items */
.predictive-search__result-group {
    padding: 10px;
}

.predictive-search__heading {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
    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: #000;
}

.predictive-search__item-query-result mark {
    background-color: yellow;
}

/* Hover effects */
.predictive-search__list-item:hover {
    background-color: #f8f8f8;
}

/* Adjustments to prevent horizontal scrolling */
.predictive-search__results-list {
    overflow-x: hidden; /* Prevent horizontal scrolling */
    max-height: 300px; /* Set a maximum height for the results box */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds max height */
}
</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';
    } else {
        searchBox.style.display = 'none';
    }
});
</script>

result of the custom liquid: (ill get rid of the old search bar, if I can fully script the new bar)

this is the code I need to copy and paste into the custom liquid:

this is what I would like to appear when a user enters in something in the custom search box

" 

 

any thoughts? anyone have code I can use for a custom search bar? Or suggest a free/paid app?

[KetanKumar]

@Brian-A  oh sorry for this issue how can i check your store because your password doesn't work can you please resend new password 

[Brian-A]

Password01

[KetanKumar]

@Brian-A yes i have try this but not working 

[Brian-A]

not sure why? 😕 

[KetanKumar]

@Brian-A Thanks now is working 

yes i have check one app as per your theme work as well can you please  check this https://apps.shopify.com/product-filter-and-search