Search a Database

I LOVE YOU!! YOU ARE A GENIUS!!!

I TOTALLY UNDERSTOOD ALL THAT.

OMG I LOVE THIS!!! It’s like i’m reading a WHOLE new language!!!

Yoav, can you take a look at my code above Nayeli’s. It has no errors in the code, but gets an error when it executes in preview. Basically just does nothing when it runs on the published site?

but produces this error in preview –
There was an error in your script
TypeError: e is not a function. (In ‘e()’, ‘e’ is null)gets this error in preview

It was the same error in mine. Read his explanation about what to change. I BARELY made it into a video tutorial to explain it myself (with visuals) … I am just waiting for it to be published on the Wix Community Channel …

It might be a while longer … but here is the link to the Channel just in case you wanted to take a look …

nice hat (Nayeli’s in the video) :slight_smile:

Sandy,
try changing your import line to be like in Yoav’s code snippet:

import wixData from ‘wix-data’;

instead of:

import {
wixData
} from ‘wix-data’;

changed code as follows, same result. same error.
I’m sure there’s a rooky mistake here somewhere.

// Code to Search for Last Name (title)
import wixData from ‘wix-data’;
export function button1_onClick(event)
{
let searchValue = $w(‘#textInput1’).value;
wixData.query(‘classmates’)
.contains(‘title’, searchValue)
.find()
.then(res =>
{
let foundItems = res.items;
$w(‘#table1’).rows = res.items;
});

is that the entire code on the page?
seems that your missing the closing ‘}’ for the onClick handler.

please paste the entire code for the page and we’ll take a look.

p.s.
do you know how to use the “code” option in this forum?
it allows you to mark a section as code so you get all the nice fonts and colors for code.

OK, the additional } fixed the errors, but it still doesn’t work.
I tried changing the search argument to a literal to see if the problem is I’m not picking up the input from the field, but that didn’t do anything different.

No, don’t know how to make it let you see the pretty colors? sorry.

Here is link to the page, so you can see what happens. https://www.png68.online/copy-of-class-index-1

// Code to Search for Last Name (title)
import wixData from ‘wix-data’;

$w.onReady(function () {}

);

export function button1_onClick(event) {
let searchValue = $w(‘#textInput1’).value;
// let searchValue = “Bevil”;
wixData.query(‘classmates’)

.contains('firstName', searchValue) 

.find() 
	.then(res => { 
		let foundItems = res.items; 
		$w('#table1').rows = res.items; 
	}); 
}

I am using this example, to search for all terms entered into the searchInput.

 import wixData from 'wix-data';
 
  export function searchButton_onClick(event)  {
   let searchValue = $w('#searchButton').value;
   let searchWords = searchValue.split(' ');
   let query = wixData.query('my-collection')
       .contains('physicalIssue', searchWords[0]);
  
  for (let i=1; i < searchWords.length; i++) {
      query = query.or(wixData.query('my-collection') 
      .contains('physicalIssue', searchWords[i]));
    }
      
      query.find()
       .then(res => {
        $w('#resultsTable').rows = res.items;
         });
        
      }       

I want to use the .hasAll parameter so the table only shows results if a field contains the entire search query. With the current code it shows all the results containing part of the query.

When I use

.hasAll('tags', searchWords[X])

it returns no results at all.

Any Advice?

Sandy - are you sure you published your site after the code change?
the public site seems to still be missing the closing ‘}’.

Hi GCC,
some info required.

assume the user inputs the following search: “big blue bird”.
do you want the results to include:

  1. only items that have “big blue bird” in the field’s value, or
  2. only items that have “big” and “blue” and “bird” in the field’s value

so for example if the field has the value “the blue bird is big”, you’ll only find it when doing the #2 query.

please advice,
thanks.

Hay Sandy,

Looking at your site, it appears that the button click event is not registered and therefore not being called. Also, the collection name used in the code differs from the actual collection name causing the process to fail.

First, looking at the event - the code you have is


But when looking at the property panel for button1 the event is not registered there.


This is easy to solve - just clicking on the add button for onClick and creating a new function, then copy the code to the new generated function.

The second problem, the collection name, in the code is written as classmates while the actual collection name is Classmates . Case is important with collection names. To see this problem you can add a catch element to your code such as

wixData.query('classmates')
	.contains('firstName', searchValue)
 	.find()
		.then(res => {
			console.log('dsfsf');
			let foundItems = res.items;
			$w('#table1').rows = res.items;
		})
		.catch(console.log)

which would tell us

Error: The classmates collection does not exist. You cannot work with a collection using the Data API before it is created in the Editor.

Hey Ziv, thanks for replying. #2 is the option I think I’m going for. I want to make sure the entire search inquiry is in the field, but the order each word appears in the field shouldn’t matter, just that they’re there.

Here is the video :slight_smile:

Thank you all, it was very helpful and it works :slight_smile:
I’ll continue exploring the new possibilities of the wix developer.
Is there any road map for adding more complex design for the database?

Hi Navit,
glad to hear.

Yes, there’s a roadmap, but before I show my hand, what exactly are you looking for?
:wink:

Hi GCC,
in general, what we do is add a ‘contains’ condition for any word in the input.
this will make sure we only find items that have word1 AND word2 AND … AND word(n), regardless of the order they appear in.
the code snippet is below.

import wixData from 'wix-data'; 

//searching for items that contain *all* the words in the search input
export function searchButton_onClick(event) 
{
    //assume the input comes from a component called 'searchInput'
    //CHANGE TO YOUR SPECIFIC COMPONENT NAME
    let searchValue = $w('#searchInput').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('my-collection');
    
    //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('myField', 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('#resultsTable').rows = res.items; 
    })
    .catch(err =>
    {
        console.log("problem in search! " + err);
    }); 
} 

Hope this helps!

Unfortunately, this did not work, it returned all videos in the database. The only thing I added was

.descending('created') 

to the query.

export function searchButton_onClick(event) 
{
    //assume the input comes from a component called 'searchInput'
    //CHANGE TO YOUR SPECIFIC COMPONENT NAME
    let searchValue = $w('#searchInput').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('Videos')
            .descending('created');
    
    //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.contains('tags', 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('#resultsTable').rows = res.items; 
    })
    .catch(err =>
    {
        console.log("problem in search! " + err);
    }); 
} 

Yoav - Breakthru!! OK, it works. I actually had tried changing the case on the collection name, but since the button event connection didn’t exist, I thought that wasn’t the issue.

So, now that I have a piece of working code, I’ll go try to add some other cool stuff.

Yoav and Ziv - Thanks both of you for making the effort to get me to this point. I’m excited. Thanks again.

Hi GCC -
I had a bug! (oh, the shame ;-))

fixed it, try copying the code snippet again.

p.s.
see if you can find it and if you know why it now works…