Start showing matching search results after 3 letters in dawn theme

[Krishna12]

Hello,

I am using Dawn theme. There is search functionality which have requirement to Start showing matching search results after 3 letters. and show max 6 results.

Do we have to change api or change in code ? please help.  

[Huptech-Web]

Hi @Krishna12 
You can check this Shopify documentation for a detailed explanation of the code of predictive search: https://shopify.dev/docs/themes/navigation-search/search/predictive-search

[Krishna12]

@Huptech-Web yes i have checked that document but how can i add condition to show result once only 3 letter apply.

[Huptech-Web]

@Krishna12 
You can use the below code to get the desired output

document.querySelector("#Search_input_id").addEventListener("input", function(e) {
    var query = e.target.value;

    
    if(query.length >= 3) {
        
        fetch("/search/suggest.json?q=" + query + "&resources[type]=product&resources[limit]=6")
            .then(response => response.json())
            .then(data => {
                var results = data.resources.results.products;
                displayResults(results.slice(0, 6)); 
            });
    } else {
        
        clearResults();
    }
});

function displayResults(results) {
    console.log(results);
}

function clearResults() {
    
}

[Krishna12]

@Huptech-Web 

I have added this code in theme.liquid file. but its not working after this line 

fetch("/search/suggest.json?q=" + query + "&resources[type]=product&resources[limit]=6")

Is it causing because theme have not suggest.json file ?

There is main-search.js file in dawn theme. Can we do anything in this file ? added code.

class MainSearch extends SearchForm {
constructor() {
super();
this.allSearchInputs = document.querySelectorAll('input[type="search"]');
this.setupEventListeners();
}

setupEventListeners() {
let allSearchForms = [];
this.allSearchInputs.forEach((input) => allSearchForms.push(input.form));
this.input.addEventListener('focus', this.onInputFocus.bind(this));
if (allSearchForms.length > 4) return;
allSearchForms.forEach((form) => form.addEventListener('reset', this.onFormReset.bind(this)));
this.allSearchInputs.forEach((input) => input.addEventListener('input', this.onInput.bind(this)));
}

onFormReset(event) {
super.onFormReset(event);
if (super.shouldResetForm()) {
this.keepInSync('', this.input);
}
}

onInput(event) {
const target = event.target;
this.keepInSync(target.value, target);
}

onInputFocus() {
const isSmallScreen = window.innerWidth < 750;
if (isSmallScreen) {
this.scrollIntoView({ behavior: 'smooth' });
}
}

keepInSync(value, target) {
this.allSearchInputs.forEach((input) => {
if (input !== target) {
input.value = value;
}
});
}
}

customElements.define('main-search', MainSearch);

[Huptech-Web]

@Krishna12 You can replace the search code with the current code and get all the details in the JSON form in the displayResults function. You can check the Chrome console for more details from there you can append the result where you want to show,
The code is tested in the latest and old versions of the Dawn theme.
Replace the "#Search_input_id" with the id you have on the theme in search input. that's it.