Filtering a CMS with search function for live users

Ask the community
, , ,
1

Question:
Does anyone know how I can filter a CMS with a search bar for my website subs? I have tried like 3 different codes that were linked to tutorials but they do not work at all. Please advise–thanks!
Product:
Wix Editor

What are you trying to achieve:
I just want my users to be able to search a CMS by title and other texts, not tags.

What have you already tried:
I have already searched many video tutorials that show code. When I attempt the same thing, it doesn’t work.

Additional information:
none specifically

2

This seems like a basic query type. The use case might depend on whether you need exact matches or partial matches. One possibility is the following if partial matches are okay (I assume this is called frontend and not backend?)

import wixData from 'wix-data';

async function searchDatabase (searchString) {
  let response = await wixData.query("myDatabase").contains("field", searchString).find()
  if (response.items.length === 0 {
     console.log("no results found")
     //whatever you want to do if no results found
  } else {
    console.log("results:")
    console.log(response.items)
    //whatever you want to do if results found
  }
}

//if an exact match is required, use .eq instead of .contains
//that is likely not going to be user friendly unless you are filtering with a dropdown

Without knowing more about the use case, this is the best I can help. Hope it’s a good starting point

3

Thanks for your reply. This is essentially what I have been trying but it isn’t working and I am not sure why.

4

Check the permissions on your database. You can also try using the following parameter to get around potential permissions issues

NOTE THIS SHOULD ONLY BE IMPLEMENTED ON THE BACKEND SHOULD YOU CHOOSE TO DO THIS

import wixData from 'wix-data';

let options = { suppressAuth: true }

async function searchDatabase (searchString) {
  let response = await wixData.query("myDatabase").contains("field", searchString).find(options)
  if (response.items.length === 0 {
     console.log("no results found")
     //whatever you want to do if no results found
  } else {
    console.log("results:")
    console.log(response.items)
    //whatever you want to do if results found
  }
}
5

import wixData from ‘wix-data’;>

let options = { suppressAuth: true }

async function searchDatabase (searchString) {
let response = await wixData.query(“myDatabase”).contains(“field”, searchString).find(options)
if (response.items.length === 0 {
console.log(“no results found”)
//whatever you want to do if no results found
} else {
console.log(“results:”)
console.log(response.items)
//whatever you want to do if results found
}
}

NOTE THIS SHOULD ONLY BE IMPLEMENTED ON THE BACKEND SHOULD YOU CHOOSE TO DO THIS

Such advices will only confuse the questioner.

It is clear that the post-opener is not very familiar with coding, so i would not recommend to work on backand in his case. He should first understand what is backend and what is frontend.

And also the shown code for backend would be wrong in this shown example, since following parts are missing, or were not mentioned or explained…
a) shown function is NOT an EXPORT-FUNCTION
b) it was not mentioned that a new backend-module would be needed to be created for this.
c) also the fact of an import to the front-end, what also not has been mentioned.

So like already mentioned before → in this case it would be much easier for the questioner to work on FRONTEND.

First you should make clear the following points:
a) Which DATABASE (CMS) do you want to query (do you want to work with)?
b) What kind of DATABASE is it? → OWN-ONE? CREATED by an APP ?
c) Which PERMISSIONS AND RESTRICTION are given to the DATABASE ?

Once you have larified such questions, you can start to query your database.

Since you work with code, you will need the WIX-DATA-API, that means your code would start with the import of this API to your page…

import wixData from 'wix-data';

Every of your codes should start with —>
$w.onReady(()=>{......your whole code here.....});
…after you have imported the neccessary API to your page.

Sometimes you have to (you can) declare global variables first before your $w.onReady()-part commes into action.

Your code right now would look like…

import wixData from 'wix-data';> 

const myCMS = 'enter here the ID of your DATABASE';

$w.onReady(()=>{
  
});

…which represents the basic-structure of your code.

Now you can add your FIRST-FUNCTION (–> getting data from your wished database)

We expand our code…

import wixData from 'wix-data';> 

const CMS = 'enter here the ID of your DATABASE';
const FIELD = 'enter here the FIELD of your DATABASE';
const VALUE = 'enter here the VALUE you want to search for';

$w.onReady(async()=>{
     const myData = await get_data(CMS, FIELD, VALUE ); console.log('My-Data: ', myData);
});

function get_Data(cms, field, value) {
     return wixData.query(cms)
     .contains(field, value) 
     .find(options)
     .then((res)=>{return res})
     .catch((err)=>{return err});
}

Replace marked fields with your own data and test the function.
What do you get inside of your console?

—> let options = { suppressAuth: true }
Not needed if your DATABASE is completely → RESCTRICTION-FREE !!!
Make first sure that your database is accessible for everybody (for testings).