Evening all,
I am currently trying to set up a search function on my website which will consist of individual search bars for each field of my database collection. This will then allow the user to search for data using any number of search fields from just 1 right through to 8 searches to filter their results.
The code I have used so far is:
import {local} from 'wix-storage'
import wixData from 'wix-data';
async function fetchData() {
const firstPage = await wixData.query('Shunters')
.limit(1000)
.find();
const secondPage = await wixData.query('Shunters')
.limit(1000)
.skip(1000)
.find();
const allItems = firstPage.items.concat(secondPage.items);
return allItems;
}
$w.onReady(function () {
var sameWord = local.getItem('searchWord');
$w('#iClass').value = sameWord;
$w('#iClass').placeholder = sameWord;
var sameWord2 = local.getItem('searchWord2');
$w('#iNumber').value = sameWord2;
$w('#iNumber').placeholder = sameWord2;
var sameWord3 = local.getItem('searchWord3');
$w('#iPrevNumber').value = sameWord3;
$w('#iPrevNumber').placeholder = sameWord3;
var sameWord4 = local.getItem('searchWord4');
$w('#iOperator').value = sameWord4;
$w('#iOperator').placeholder = sameWord4;
var sameWord5 = local.getItem('searchWord5');
$w('#iLivery').value = sameWord5;
$w('#iLivery').placeholder = sameWord5;
var sameWord6 = local.getItem('searchWord6');
$w('#iName').value = sameWord6;
$w('#iName').placeholder = sameWord6;
var sameWord7 = local.getItem('searchWord7');
$w('#iDepot').value = sameWord7;
$w('#iDepot').placeholder = sameWord7;
var sameWord8 = local.getItem('searchWord8');
$w('#iStatus').value = sameWord8;
$w('#iStatus').placeholder = sameWord8;
$w('#Shunters').onReady(function () {
search();
});
});
export function searchButton_click_1() {
search();
}
let queryResults;
function search(){
wixData.query('Shunters')
.contains('class1', $w('#iClass').value)
.contains('number', $w('#iNumber').value)
.contains('previousNumber', $w('#iPrevNumber').value)
.contains('operator', $w('#iOperator').value)
.contains('livery', $w('#iLivery').value)
.contains('name', $w('#iName').value)
.contains('depot', $w('#iDepot').value)
.contains('status', $w('#iStatus').value)
.limit(12)
.ascending('class1')
.ascending('sort2')
.ascending('sort')
.find()
.then(res => {
queryResults = res;
$w('#repeater1').data = res.items;
});
}
export function loadingStrip_viewportEnter(event) {
$w('#loadingGif').show();
queryResults.next()
.then(res => {
$w('#loadingGif').hide();
queryResults = res;
const data = $w('#repeater1').data
$w('#repeater1').data = data.concat(res.items);
console.log("Done loading more data")
})
}
As an example of what I want to be happening if I input “60” into the ‘#iClass’ search bar, “Blue” in the ‘#iLivery’ search box and “Active” in the ‘#iStatus’ search bar, I would want it to search each of the ‘Class’, ‘Livery’ and ‘Status’ fields in my database collection and then return results that match each of the things type in to the search boxes, ignoring all of the search box fields that have been left empty.
It is working to a certain extent but it is only returning results where all of the fields have data input in them. If any row of my database collection is missing one of the 8 fields I have set search bars up for, then it is not included in my results irrelevant of whether the empty field is one I have searched for or not. As an example, if I search “60” in the ‘#iClass’ search bar and nothing else I receive a result of 1 item from the 100 that have 60 as the class because the other 99 have empty fields for ‘Previous Number’ where I would want to see all 100 items returned in that case. The 2 fields that are likely to have empty fields on rows are ‘Previous Number’ and ‘Name’ as not every item has data for these fields and if I remove both of these from my code, it works absolutely perfectly.
I’ve tried to use the .and/.or in the wixData.query but to no avail and I have tried to set up a search function for each search bar but haven’t managed to make this work either. Can anyone help me to a solution for this issue please?
Thanks