Custom Unique Search Bar,CSS and Predictive Searching? (HTML,CSS,Liquid)

[Brian-A]

For the last few days I've been working on a custom search bar, narrowed down the code but I can't seem to connect the pieces. 

I'm trying to not only make a search bar that I can modify with CSS, but connect with HTML and Liquid.

www.extremekool.com

Password01

This is the code I narrowed down: (this is the default code shoplifty uses for a search bar" 

IMAGE1: CSS

IMAGE2: Mobile

IMAGE3: Desktop-search

 

I've narrowed down most of the classes to

- header.liquid

- component.search

- header-search.liquid 

- predictive-search.css

The code above works for a liquid search bar, but I want to break free from Shopify's code, and make a completely independent search bar that I can have custom CSS but have predictive search. 

So far I modified all classes independently to have "custom-" to make them unique.

Only issues is its not connecting. Something I'm not seeing and if someone can look at my code it would help.

this is what it looks like 😕

[PaulNewton]

@Brian-A implementing predictive search in themes is a google away https://shopify.dev/docs/storefronts/themes/navigation-search/search/predictive-search 

When seeking help you really need to consider other people and drastically lower the amount of burden your expecting others to take on by making the effort to improve the quality of your communication:

1. Images are NOT suitable replacement for actual text or code, especially when there's long walls of it , use images as supplementary visual aids.
2. Further without inspectable examples of your work so far no one can really infer the problem without a lot of excess squinting and guessing based off one small screenshot that has no explanation to go with it.
3. Your basically asking other people to do a complex full re-implementation scope , instead of narrow simple scoped question like 'how do I put space between these elements'.

https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408 

---

@Brian-A wrote:

... I want to break free from Shopify's code...

---

Make a minimal reproducible example of only HTML, CSS, and JS and use an online code sandbox tool such as  codepen, or jsbin to share it.

If you frequently get low quality outcomes also read:

https://stackoverflow.com/help/how-to-ask 

How To Ask Questions The Smart Way

[Brian-A]

Thanks for the reply, I didn't want a huge wall of text so I put screenshots. I added the code you provided on my site already with a search bar and "predictive.search" Looking to make everything unique, not sure what I'm missing, general question but not sure if I need to include JAVA/CSS into my theme.liquid for everything to get read. 

Didn't think I was putting burden on anyone 😕 just advice or help on where to start looking or if im missing something would be a nice next step

In Image3 im trying to focus on 

"
div class="desktop-search">
<predictive-search class="search-modal__form" data-loading-text="Loading...">
<form action="/search" method="get" role="search" class="search search-modal__form">
<div class="field">
<input class="search__input field__input" type="search" name="q" placeholder="Search" role="combobox" aria-expanded="false" aria-owns="predictive-search-results" aria-controls="predictive-search-results" aria-haspopup="listbox" aria-autocomplete="list" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">
<label class="field__label" for="Search-In-Modal">Search</label>
<input type="hidden" name="options[prefix]" value="last">
<button type="reset" class="reset__button field__button hidden" aria-label="Clear search term">
<svg class="icon icon-close" aria-hidden="true" focusable="false">
<use href="#icon-reset"></use>
</svg>
</button>
<button class="search__button field__button" aria-label="Search">
<svg class="icon icon-search" aria-hidden="true" focusable="false">
<use href="#icon-search"></use>
</svg>
</button>
</div>
<div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
<link href="//extremekool.com/cdn/shop/t/10/assets/component-loading-spinner.css?v=116724955567955766481727485809" rel="stylesheet" type="text/css" media="all"/>
<div class="predictive-search__loading-state">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
</form>
</predictive-search>
</div>

"