How to override the Search bar functionality?

[tawang]

Hi, I'm new to Shopify development. We are looking into customizing the Search functionality. We've worked with other eCommerce platforms, which we easily implemented a few interfaces, such as Search, AutoSuggest, Facet, Refinement. Is there similar interfaces to customize the Search experience in Shopify?

I've looked through the Search-template.liqid file and it has something like this:

          <div class="input-group">
            <input type="search" id="SearchInput" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="input-group__field" autofocus>
            <button class="btn input-group__btn" type="submit">{{ 'general.search.submit' | t }}</button>
          </div>

Question is, how do we override the 'general.search.submit' to make a call to our code or web service?

[oscprofessional]

Hello tawang,

You can customize general.search.submit file.

Check where this is present in edit code section.

[tawang]

Hi @oscprofessional ,

I couldn't find that file or function in the Theme. I'm using Boundless theme, but I checked other themes as well. 

Is there examples or tutorials on customizing functions like that? For example, if I want to change this to call my own function, where should I write code for my own function? Apologize as this is a real beginner question. 

[ShopGoer4873]

Is there any updates to this? I've looked into how to override the StoreFront search but it appears its not possible. The closest I got was the predictive-search where I thought I could just change the url here:

fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}&section_id=predictive-search`, {
signal: this.abortController.signal,
})

But the response here is HTML .. I was hoping i could intercept the JSON payload instead so that it would work with any theme instead of theme specific changes. I don't want to have to create my own search blocks, just be able to intercept the storefront search call and return my own payload to the site. Is this possible?