Hello,
I am looking to create a custom search bar in the header of my travel blog to allow users to search my site on any page they are on. The results of the search will be filtered on a search results page. Below, is the header on my site, where I have included the search bar.
Currently, with the code I have now, I am able to input data into the search bar and move the users to the search results page. However, the issue is that it does not filter the information into the repeater I created. Below is my search results page, not filtering the repeater for the word france.
I also have another search bar on my search results page, so users are able to search for different results if they find the need. This search bar is filtering results and working well. Below is an image of the search results being filtered with the input ‘france’.
Could anyone please help me figure out why my search bar in my header is not filtering the repeater to do the same thing as the search bar on my search results page?
Thank you!
Below I have included the code I am using on both my global site and my search results page
Global Site Code:
import wixLocation from ‘wix-location’ ;
import { local } from ‘wix-storage’ ;
$w.onReady( function () {
});
export [function](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
}) [ searchVector_click_1(event) {](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
})
[let](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
}) [ searchQuery = $w(](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
}) [‘#searchBar2’](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
}) [).value;](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
})
[if](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
}) [ (searchQuery) {](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
})
[wixLocation.to(/search-results) ](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
})
[} ](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
})
[}](function searchVector_click_1(event) {
let searchQuery = $w(‘#searchBar2’).value;
if (searchQuery) {
wixLocation.to(/search-results)
}
})
Search Results Page Code:
import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;
import {local} from ‘wix-storage’
$w.onReady( function () {
$w( ‘#dataset1’ ).onReady( () => {
let query = wixLocation.query;
console.log(query.value);
if (query.value) { $w( ‘#dataset1’ ).setFilter(wixData.filter()
.contains( “articleContent” , query.value));
}
});
});
ABOVE IS THE CODE FOR THE SEARCH BAR IN THE HEADER AND BELOW IS THE CODE FOR THE SEARCH BAR ON THE ACTUAL PAGE
let debounceTimer;
export function searchBar_keyPress_1(event) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
$w( “#dataset1” ).setFilter(wixData.filter().contains( “title” , $w( ‘#searchBar’ ).value)
.or(wixData.filter().contains( “continent” , $w( ‘#searchBar’ ).value)
.or(wixData.filter().contains( “articleContent” , $w( ‘#searchBar’ ).value)
.or(wixData.filter().contains( “country” , $w( ‘#searchBar’ ).value)
.or(wixData.filter().contains( “url” , $w( ‘#searchBar’ ).value))))))
.then(() => {
count();
})
}, 50 );
}
function count() {
let total = $w( ‘#dataset1’ ).getTotalCount();
if (total > 1 ) {
$w( ‘#textResults’ ).text = ${total} results were found.;
$w( ‘#textResults’ ).show();
}
if (total === 1 ) {
$w( ‘#textResults’ ).text = ${total} result was found.;
$w( ‘#textResults’ ).show();
}
if (total === 0 ) {
$w( ‘#textResults’ ).text = “No result found!” ;
$w( ‘#textResults’ ).show();
}
}