Search using multiple words from different fields in the same search box and have all results shown in a repeater

[Sean_Dawson]

So I’ve tried many code scripts but cant seem to find one that actually works.
As of right now, I deleted all the code and would just like to start from scratch.

Here’s what I have:

• I have a text input named “searchBar”
• I have a loader gif named “loadingGif”
• I have a database named “Play Sets”
• This database has 2 fields that I want to use in my site search.
  Field 1 is “manufacturer” and field 2 is “playSetModel”
• I have a repeater named “repeaterResults”

What I want:

• To be able to search for multiple words at the same time in the same search box.
  For example: “Gorilla” which is from the field manufacturer, and “Adventure Wave” which is from the field playSetModel

• I want the loading gif to show up when performing a search

• I want the user to get results if any of the words match and in any order

• If the user performs a search, I want any results to show up in the repeater, and any items in the repeater that do NOT match the search results, I want to disappear.

Please someone help me. I’ve been hung up on this search issue for almost 2 weeks now.
Kind of a noob when it comes to coding. If you can please paste entire code from start to finish, it would be greatly appreciated. Thanks in advance

[CODE-NINJA]

What you are asking for, looks more like a job, to generate a SEARCH-ENGINE for you.
This is beyond a simple help.

This forum is not a CODING-WISH-CENTER!

But you can take a look here…

YEAR, MAKE and MODEL Search

Has anyone figured out how to set up a year, make and model. Drop down filter. I have seen the question SEVERAL times on google with no solution. I am actually shocked there isn’t an add-on for this. Shopify has an “app” but I prefer WIX. I do not know how to code, but need this function. HELP PLEASE. [image]

[Sean_Dawson]

What do you mean “generate a search engine”? I’m just talking about velo code for a basic site search. Ive tried a bunch I’ve found on here and on youtube and they all work but you can only type in the words from 1 database field at a time. I just want to be able to search multiple fields at the same time.
Are you saying this is not possible with a simple velo code? I’ve seen other users post similar codes that are very close to what I am asking for. Unfortunately, they never post the code from start to end, just snippets and so I get lost.

Russian-Dima, Haven’t you answered similar questions from others before. I’m basically asking for the same thing. (Search and filter data colecction with text input)

[CODE-NINJA]

If you are using a DATASET…

let lastSearchValue;
function filter(searchValue) {
    if(searchValue !== lastSearchValue) {
        $w('#contactsDataset').setFilter(
            wixData.filter().contains('title', searchValue)
            .or(wixData.filter().contains('position', searchValue))
            .or(wixData.filter().contains('department', searchValue))
        );
        lastSearchValue = searchValue;
    }
}

If you are using Wix-Data…

import wixData from 'wix-data';

let DATABASES = [];
    DATABASES[0] = 'Play Sets';
    DATABASES[1] = 'DATABASE-2-ID';
    DATABASES[2] = 'DATABASE-3-ID';


$w.onReady(function () {
    $w('#searchBar').onKeyPress((event)=> {
        const inputString = $w('#searchBar').value;
        const trimmedArray = trimWordsByComma(inputString);

        if (event.key === 'Enter') {
            wixData.query(DATABASES[0]).hasSome('manufacturer', trimmedArray)
            .or(wixData.query(DATABASES[0]).hasSome('playSetModel', trimmedArray)
            .find()
            .then((res)=> {console.log("RESULTS: ", res);
                $w('#repeaterResults').data = res.items;
            });
        }
    });


    $w('#repeaterResults').onItemReady(($i, iData, i)=>{

        console.log('Item-Data: ', iData);

    });
});


function trimWordsByComma(str) {
    const words = str.split(',');
    const trimmedWords = words.map(word => word.trim());
    return trimmedWords;
}

Complete the CODE…

[Sean_Dawson]

I am having an issue with lines 16 through 20 of your code. Any suggestions?

I do have a dataset attached the the repeater. Its called “dataset1”
Perhaps I am supposed to be using the 1st code? If i am, I don’t know where I am supposed to insert my own ID’s

[CODE-NINJA]

CORRECTION…

$w('#searchBar').onKeyPress((event)=> {
        const inputString = $w('#searchBar').value;
        const trimmedArray = trimWordsByComma(inputString);
        let QUERY = wixData.query(DATABASES[0]);

        if (event.key === 'Enter') {
            QUERY = QUERY.hasSome('manufacturer', trimmedArray)
            QUERY = QUERY.or(QUERY).hasSome('playSetModel', trimmedArray)
            QUERY.find()
            .then((res)=> {console.log('RESULTS: ', res);
                $w('#repeaterResults').data = res.items;
            }).catch((err)=>{console.log(err);})
        }
    });

…or…

$w('#searchBar').onKeyPress((event)=> {
        const inputString = $w('#searchBar').value;
        const trimmedArray = trimWordsByComma(inputString);
        let QUERY = wixData.query(DATABASES[0]);

        if (event.key === 'Enter') {
            QUERY = QUERY.hasSome('manufacturer', trimmedArray)
            .or(QUERY).hasSome('playSetModel', trimmedArray)
            QUERY.find()
            .then((res)=> {console.log('RESULTS: ', res);
                $w('#repeaterResults').data = res.items;
            }).catch((err)=>{console.log(err);})
        }
    });

[Sean_Dawson]

So do i put this new code in to replace lines 16 through 20?

[CODE-NINJA]

Replace shown CODE-BLOCK

[Sean_Dawson]

I’m sorry. I’m a complete noob and I cant get it to work.
There are no errors showing when I paste the code, yet when I preview and look at the developer console, I see error: “WDE0025: The Play Sets collection does not exist. You cannot work with a collection using the Data API before it is created in the Editor”

Nothing happens when I start to type or press enter aside from that error

Maybe I’m explaining it wrong. I have a collection named “Play Sets” the collection ID is named PlaySets and the Dataset id for this collection is called #dataset1

[CODE-NINJA]

Try this one…

import wixData from 'wix-data';

let DATABASES = [];
    DATABASES[0] = 'PlaySets';
    DATABASES[1] = 'DATABASE-2-ID';
    DATABASES[2] = 'DATABASE-3-ID';


$w.onReady(function () {
    $w('#searchBar').onKeyPress((event)=> {
        //const inputString = $w('#searchBar').value;
        //const trimmedArray = trimWordsByComma(inputString);
        const trimmedArray = ['SEARCHWORD1', 'SEARCHWORD2', 'SEARCHWORD3', 'SEARCHWORD4'];
 

        if (event.key === 'Enter') {
            wixData.query(DATABASES[0])
            .hasSome('manufacturer', trimmedArray)
            .or(wixData.query(DATABASES[0]).hasSome('playSetModel', trimmedArray))
            .find()
            .then((res)=> {console.log('RESULTS: ', res);
                //$w('#repeaterResults').data = res.items;
            }).catch((err)=>{console.log(err);})
        }
    });

    
    $w('#repeaterResults').onItemReady(($i, iData, i)=>{

        console.log('Item-Data: ', iData);

    });
    
});


function trimWordsByComma(str) {
    const words = str.split(',');
    const trimmedWords = words.map(word => word.trim());
    return trimmedWords;
}

Always use → IDs instead of NAMES !!!

In this example → you can add SEARCHWORDS → MANUALLY inside the CODE.

 const trimmedArray = ['SEARCHWORD1', 'SEARCHWORD2', 'SEARCHWORD3', 'SEARCHWORD4'];

[Sean_Dawson]

I don’t know. Nothing I do seems to work. What would it cost to get you on my site to work on the code?

Also, really wanting it to start searching as soon as the user starts to type each letter and not have to press enter to search

[Sean_Dawson]

Originally, I was using this code but had some issues. I had a collapsed repeater that would give search suggestions as the user typed. You could then click a option from the 1st repeater that would filter out the bottom repeater with said results. so it had two repeaters in total. One for the suggested results and one with the final results. This worked a little, but would never let me click on a result in the 1st repeater and it wouldn’t let me search multiple fields at the same time.

Here is that code. Perhaps it would be easier to just make adjustments to this since it was working somewhat:

import wixData from 'wix-data';


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

});

export function searchBar_keyPress(event) {

	$w("#repeaterResults").data = [];
	$w("#repeaterResults").collapse();
	
	setTimeout(() => {
          if ($w("#searchBar").value.length >= 2) {
			  $w("#loadingGif").show();
			  $w("#datasetSearch").setFilter(wixData.filter().startsWith("manufacturer", $w("#searchBar").value)
			  .or(wixData.filter().startsWith("playSetModel", $w("#searchBar").value)))
			  .then(() => {
               count();
			  })  
		  }
		  else {
             $w("#repeaterSearch").collapse();
			 $w("#loadingGif").hide();
			 $w("#totalResultsText").hide();
		  }
	},500)

}


function count () {
	let total = $w("#repeaterSearch").data.length;

	if (total > 0) {
		$w("#repeaterSearch").expand();
		$w("#totalResultsText").text = `${total} results found`;
	} else {
		$w("#repeaterSearch").collapse();
		$w("#totalResultsText").text = "0 results found";
	}
	$w("#totalResultsText").show();
	$w("#loadingGif").hide();
}



export function repeaterSearch_itemReady($item, itemData, index) {
	
	let id = itemData._id;


	$item("#manufacturer").onClick(() => {
		$w("#loadingGif2").show();

		$w("#repeaterResults").data = [];

		$w("#searchBar").value = $item("#manufacturer").text;

		$w("#datasetResults").setFilter(wixData.filter().eq("_id", id))
		.then(() => {
         $w("#repeaterResults").expand();
		 $w("#repeaterSearch").collapse();
		 $w("#loadingGif2").hide();
		})
        
		$w("#repeaterSearch").data = [];
		$w("#loadingGif2").hide();
		$w("#totalResultsText").hide();

	})

	$item("#playSetModel").onClick(() => {
		$w("#loadingGif2").show();

		$w("#repeaterResults").data = [];

		$w("#searchBar").value = $item("#playSetModel").text;

		$w("#datasetResults").setFilter(wixData.filter().eq("_id", id))
		.then(() => {
         $w("#repeaterResults").expand();
		 $w("#repeaterSearch").collapse();
		 $w("#loadingGif2").hide();
		})

		$w("#repeaterSearch").data = [];
		$w("#loadingGif2").hide();
		$w("#totalResultsText").hide();

	})

}