two codes work fine. But I want to combine the good aspects of both codes. How can I do it. Search and filter

Ask the community
,
1

both but my code works. But the search conditions for the 1st code are better because it is not case sensitive and lists results that contain a few words. For example, if there are 3 words written in the word, list (box supply paint) lists the 3 words specified in the text, if any.

  1. The filtering feature of the code is good, I can list the word search results with filtering.

As a result, I want to combine the search feature of the 1st code and the search result filtering of the second code.

How can I get someone to combine it for me?

1. Code

import wixData from ‘wix-data’ ;

export function searchButton_onClick(event)
{
//assume the input comes from a component called ‘searchInput’
//CHANGE TO YOUR SPECIFIC COMPONENT NAME
let searchValue = $w( ‘#SearchBox’ ).value;

//split the search inputs into distinct words
let searchWords = searchValue.split( ’ ’ );

//build a query for ‘my-collection’
//CHANGE THIS TO YOUR COLLECTION NAME
let query = wixData.query( ‘SouthAfrica’ )
.descending( “overview” );

//add a “contains” condition to the query for each word:
//assumes we search in the field ‘myField’
//CHANGE THIS TO YOUR FIELD NAME
for ( let i= 0 ; i < searchWords.length; i++)
{
query = query.contains( ‘overview’ , searchWords[i])
}

//actually run the query:
query.find().then(res =>
{
//give the results to the table to display
//assume the table is named ‘resultsTable’
//CHANGE TO YOUR SPECIFIC COMPONENT NAME
$w( ‘#repeater1’ ).data = res.items;
})
. catch (err =>
{
console.log( "problem in search! " + err);
});
}

2. Code

import wixData from ‘wix-data’ ;

$w.onReady( function () {
//TODO: write your page related code here…
loadContinents()
});

function loadContinents () { wixData.query( “Continents” ).limit( 1000 ).ascending( “continents” ).distinct( “continents” ).then((results) => {
let distinctList = results.items.map(element => { return {label: element, value: element};})
distinctList.unshift({ “value” : “” , “label” : “All Continents” })
$w( “#Continents” ).options = distinctList
})
}

////////////////////////////////////////

let lastFilterKeywords;
let lastFilterContinents;

function filter (keywords, continents) {
if (lastFilterKeywords !== keywords || lastFilterContinents !== continents) {
let newFilter = wixData.filter();
if (keywords) { //this will check to see if there are any value for keywords
newFilter = newFilter.contains( “overview” , keywords)
}
if (continents) { //this will check to see if there are any value for continent
newFilter = newFilter.contains( “continents” , continents)
}
$w( “#dataset1” ).setFilter(newFilter);
lastFilterKeywords = keywords;
lastFilterContinents = continents;
}
}

let onTime;

export function sKeyword_keyPress(event) {
//Add your code for this event here:
if (onTime) {
clearTimeout(onTime)
onTime = undefined;
}
onTime = setTimeout(() => {
filter($w( “#sKeyword” ).value, lastFilterContinents)
}, 10 )
}

export function Continents_change(event) {
//Add your code for this event here:
filter(lastFilterKeywords, $w( “#Continents” ).value);
}

#search #filter #searchandfilter code #filtering

2

??

3

Hi;
Filter does not work with search results. Both of them work independently. I want to filter the search results. Can someone please edit where is the error or what is missing?




import wixData from 'wix-data'; 

export function searchButton_onClick(event) 
{
 //assume the input comes from a component called 'searchInput'
 //CHANGE TO YOUR SPECIFIC COMPONENT NAME
 let searchValue = $w('#SearchBox').value; 
 
 //split the search inputs into distinct words
 let searchWords = searchValue.split(' '); 
 
 //build a query for 'my-collection'
 //CHANGE THIS TO YOUR COLLECTION NAME
 let query = wixData.query('Afghanistan')
      .descending("overview");
 
 //add a "contains" condition to the query for each word:
 //assumes we search in the field 'myField'
 //CHANGE THIS TO YOUR FIELD NAME
 for (let i=0; i < searchWords.length; i++) 
    {       
        query = query.contains('overview', searchWords[i])
    }  
 
 //actually run the query:
    query.find().then(res => 
    { 
 //give the results to the table to display
 //assume the table is named 'resultsTable' 
 //CHANGE TO YOUR SPECIFIC COMPONENT NAME
        $w('#repeater1').data = res.items; 
    })
    .catch(err =>
    {
        console.log("problem in search! " + err);
    }); 
} 


//////////////////////////////
$w.onReady(function () {
 //TODO: write your page related code here...
    loadContinents()
});

function loadContinents () {    wixData.query("Continents").limit(1000).ascending("continents").distinct("continents").then((results) => {
 let distinctList = results.items.map(element => { return {label: element, value: element};})
        distinctList.unshift({"value": "", "label": "All Continents"})
        $w("#Continents").options = distinctList
    })
}

let lastFilterSearchValue;
let lastFilterContinents;

function filter (searchvalue, continents) {
 if (lastFilterSearchValue !== searchvalue || lastFilterContinents !== continents) {
 let newFilter = wixData.filter();
 if (searchvalue) {//this will check to see if there are any value for keywords
            newFilter = newFilter.contains("overview", searchvalue)
        }
 if (continents) { //this will check to see if there are any value for continent
            newFilter = newFilter.contains("continents", continents)
        }
        $w("#dataset1").setFilter(newFilter);
        lastFilterSearchValue = searchvalue;
        lastFilterContinents = continents;
    }
}


let onTime;

export function SearchBox_keyPress(event) {
 //Add your code for this event here: 
 if (onTime) {
        clearTimeout(onTime)
        onTime = undefined;
    }
    onTime = setTimeout(() => {
        filter($w("#SearchBox").value, lastFilterContinents)
    }, 10)
}

export function Continents_change(event) {
 //Add your code for this event here: 
    filter(lastFilterSearchValue, $w("#Continents").value);
}