Hi guys,
I currently have a search bar set up which takes the user to a results page which is set up using a repeater. I have limited the results page to show 12 results max and have a ‘Load More’ button for the user to then bring up more results.
I get the correct results as per the search and they show the correct number of results (ie 12 max) but when I then click on the ‘Load More’ button it just brings up all of the data from my dataset and completely disregards the search I have conducted. I have connected the button to my dataset and set it up to load more when clicked but can’t seem to get it to bring up the next batch of results for my search.
Is there some coding that is needed to get this to work?
Thanks
Matt
1 Like
As per my knowledge, load more button load the data from the dataset without any filtering … I guess you need to use small coding to achieve what you want…
Some idea to achieve uing code what you want will be…
1.Use wix data query with limit to get the first 12 results from the dataset. .
2. Store this query in a variable.
3.when load button is pressed use this saved
query and skip the initial 12 results and get next 12 results and apply it to the repeater…
Have a look at our API reference or older forum post and try out with the above logic… If it’s not working just post the code you have tried and we will help you…
Hi Thrishti,
Thanks for your response.
Before I go any further with this one, I thought I would get back in touch with you as I have made a slight adjustment to the page in question. Basically, instead of using a ‘Load More’ button I have now set it up so the next data loads when I scroll the screen down.
The full code for this results page is below:
import { local } from 'wix-storage';
import wixData from 'wix-data';
$w.onReady(function () {
var sameWord = local.getItem("searchWord");
$w("#searchBar").value = sameWord;
$w("#searchBar").placeholder = sameWord;
$w('#Shunters').onReady(function () {
search();
});
});
export function dropdown1_change(event) {
dropdown1Change();
}
function dropdown1Change () {
let searchValue = $w("#searchBar").value;
let fieldName = $w("#dropdown1").value;
$w('#Shunters').setFilter(wixData.filter()
.contains(fieldName, searchValue)
)
.then(() => {
console.log("filter set");
});
}
export function searchButton_click_1() {
search();
}
function search() {
wixData.query('Shunters')
.contains('number', $w('#searchBar').value)
.or(wixData.query('Shunters').contains('previousNumber',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('operator',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('livery',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('name',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('depot',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('status',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('class1',$w('#searchBar').value))
.limit(24)
.ascending('class1')
.ascending('sort2')
.ascending('sort')
.find()
.then(res => {
$w('#repeater1').data = res.items;
$w('#text99').hide();
if ($w('#searchBar').value.length !== 0) {
wixData.query('Shunters')
.contains('number', $w('#searchBar').value)
.or(wixData.query('Shunters').contains('previousNumber',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('operator',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('livery',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('name',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('depot',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('status',$w('#searchBar').value))
.or(wixData.query('Shunters').contains('class1',$w('#searchBar').value))
} else {
$w('#repeater1').data = []; // Resetting data
$w('#text99').text = 'No Results Found!';
$w('#text99').show();
}
});
}
export function loadingStrip_viewportEnter(event) {
$w('#loadingGif').show();
$w('#Shunters').loadMore()
.then(() => {
$w('#loadingGif').hide();
console.log("Done loading more data")
});
}
Does this still work to the same logic and do I still need to follow those 3 steps you mentioned to get my desired result following this change or does this change the approach I need to take to solve my issues?
Thanks very much
Matt