Search Collection and Display Result in Text Object

Ask the community
,
1

I’m trying to implement a search of a collection.

The concept is to have an input field with a submit button. And under this, a text object that will change to match the result of the search. A user inputs the search term, then clicks the submit button. The search term is then located in the “keyword” field of a particular item in the collection. Then, the content from the “article” field of that same item replaces the information in the text object on the web page.

I’ve tried to hack a few examples, but unfortunately they don’t work the same way. The examples that exist create a situation where the whole database is displayed, and then a keyword is used to filter those examples.

Would anyone be able to show me an example that does something more similar to my needs that I could hack appropriately?

2

I think this is not that difficult, it would be something like this:

import wixData from 'wix-data'

$w.onReady(() => {
    $w("#buttonSearch").onClick(async () => {
 
// This gets the value from the input and puts it into a variable called keyword
let keyword = $w("#inputKeyword").value

//This sends the variable keyword to a asynchronous function called searchKeyword
let search = await searchKeyword(keyword)

//This treats the results that will be displayed in the text element
let result = treatResults(search)
        displayResult(result)
 })
})

//This is the main function that searchs the collection and returns the search
const searchKeyword = async keyword => {
 let search = await wixData
 .query("Collection")
 .eq("keyword", keyword)
 .find()

 return search
}

//This function treats the object that is returned in the searchKeyword function and extracts the value from the Article field
const treatResults = results => { 
 if (results.items.length > 0) {
 return results.items[0].article
 }
 return "nothing"
}

//This function checks if something was found, and if so, it changes the displayed text
const displayResult = textToDisplay => {
 if (textToDisplay != "nothing") {
        $w("#textToChange").text = textToDisplay
 }
}

If you need any explanation of the things that were done, just let me know!

3

Thank you so much, I’ll give it a read through, and a try out with hacking, and let you know. I really really appreciate it. I assumed it may not be that hard for someone who has a handle on the code.

I also EXTREMELY appreciate the extensive commenting. It will help me learn.

4

This worked perfectly, and will help me go forth and design some other similar things. Thank you!

There is one thing that happened that was unusual, but I can work around it. The text that was retrieved from the “article” field in the collection is Rich Text. As a result, it printed the information in the text box with tags that showed the formatting.

I couldn’t find a way to convert the text box to Rich Text, or an object that was specifically Rich Text. So I will just change the settings of the “article” item to Text instead, and that will be just fine.

5

@shawnjoh You are rigth that it is easier for someone used to coding, and thinking it through, I should have used the old way of function declaration to make myself clearer. Example:

function something() {
    console.log("I'm a function.")
}

const samething = function() {
    console.log("I'm also a function.")
}

const samethingNewer = () => {
    console.log("I'm a newer function declaration with arrow functions")
}
6

It’s ok, I’ve been reading up on javascript, and while I’m not comfortable writing it that way yet, at least I was able to recognize that it was just a different way of writing it :slight_smile: