Resetting table upon empty search query

Ask the community
,
1

Dear friends,

Thank you so much to all of you helping newcomers, like myself, it would be hard to do anything without you!

I’m doing a searchbar, to search a glossary/dictionary database, it’s all working well except:

  • When the user does an empty search , (i.e., deletes the content of the input field, and presses enter), it doesn’t reset the table to the alphabetical order (predefined) .
    It sets the table to some default, determined by latest entry in the database, rather than alphabetical according specific column.

Here is my code:

import wixData from ‘wix-data’;

$w.onReady( function () {
//TODO: import wixData from ‘wix-data’;
});

export function searchButton_click() {
search();
}
export function input1_keyPress(event, $w) {
if (event.code === 13){
search();
}
}
function search() {
wixData.query(“glossary”)

.contains(“ptPrimario”, $w(“#input1”).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#table1”).rows = res.items;
});

}

Can anyone help?

Thanks so much in advance!
Andre

2

I take it that you have read this tutorial page about adding a search.
https://support.wix.com/en/article/corvid-tutorial-adding-collection-data-search-functionality

Just simply add a reset or clear button, something like this.

export function resetbutton_click(event, $w) {
$w("#searchbar").value = undefined;
$w("#dataset1").setFilter(wixData.filter());
}

See here for more info on setFilter as you can also use it to set the filter on the dataset first before the user does their search.
Dataset - Velo API Reference - Wix.com

You can also filter your dataset yourself without code by using the dataset’s own filter settings.
CMS (Formerly Content Manager): About Filtering and Sorting Collection Items on Your Site | Help Center | Wix.com

Finally, if you are using onKeypress, then you might want to give the element a little bit of a timed delay with the use of setTimeout.
https://www.wix.com/corvid/forum/community-discussion/give-the-textinput-onkeypress-function-some-time

3

Thanks so much!

Indeed I have done already a reset and clear button that works fine, but it’s still awkward because, when you clear it manually (as so many users do in a dictionary) the table, neither retains the previous search, neither it goes to correct alphabetical view (default one).

In short, as it currently is, a user pressing enter in the search bar, while blank, sees the table change from an alphabetic order to a random one.
By pressing enter on the empty search bar, the table changes view to something we don’t want.

I’m was looking for something like, " if query is blank, do this or don’t do anything, leave as it is"

I’ll be very grateful for help in overcoming this… thanks again

4

Got it! By studying the ordering of tables in the link you sent.

I was lacking an “ascending sort” in the search that operates upon enter, so that it becomes always sorted.

(having said that, I don’t understand why it was alphabetically ordered when there was something in the query., but it was…)

Thanks!

This search function on Enter, with search button and Clear button works:

import wixData from ‘wix-data’;

$w.onReady( function () {
//TODO: import wixData from ‘wix-data’;
});

export function searchButton_click() {
search();
}
export function input1_keyPress(event, $w) {
if (event.code === 13){
search();
}
}
function search() {
wixData.query(“glossary”)
// Query the collection for any items whose “Name” field contains
// the value the user entered in the input elemen
.eq(“validate”, true )
.contains(“sctSimpl”, $w(“#input1”).value)
.ascending(“sctSimpl”)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#table1”).rows = res.items;
});

}

export function limpar_click(event) {

wixData.query(“glossary”)
// Query the collection for any items whose “Name” field contains
// the value the user entered in the input element
.eq(“validate”, true )
.ascending(“sctSimpl”)
.limit(1000)
.find()
.then(res => {
// Set the table data to be the results of the query
$w(“#table1”).rows = res.items;
$w.onReady( function () {
$w(“#input1”).value=“”;
} );
});
}