Display Data in table when typed in search bar

Ask the community
,
1

Hello,
I want to hide the data in table when page loads , when customer types something in search bar that when it should display the specific data
I’m a beginner can anyone help me
Here the code :

import wixData from ‘wix-data’;
$w.onReady( function () {
//TODO: write your page related code here…
});
export function input1_keyPress(event) {
let SearchValue = $w(“#input1”).value;
$w(“#dataset1”).setFilter(wixData.filter().contains(‘title’, SearchValue).or(wixData.filter().contains(‘registrationNumber’, SearchValue)));
}

2

There are examples that you can look at already.
https://support.wix.com/en/article/corvid-tutorial-adding-collection-data-search-functionality

Nayeli (Code Queen) has a great search example that you can use.
https://codequeen.wixsite.com/search-redirect/results
https://www.youtube.com/watch?v=ZiKcx2nlrkw - youtube video of above tutorial.

You should also be looking at adding a timeout to your code too so that the user input has a chance of collecting all the user inputs.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/give-the-textinput-onkeypress-function-some-time

You can find a good example with this already added here from Vorbly.
https://www.vorbly.com/Vorbly-Code/WIX-CUSTOMIZED-SEARCH-BAR-USING-REPEATERS

3

Hey,
Thank you for your response !
I saw Nayeli (code queen) video and created a sample data-set, but I’m facing some problem.
It doesn’t display the searched value on my result page instead it displays my whole database.
it’s also showing an error ‘#membersdataset is not a valid sector’

My Search page code:

import {local} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady(function () {
});
export function searchButton_click() {
let word = $w("#searchBar").value;
local.setItem("searchWord", word);
wixLocation.to('/results');
}

My result page code:

import {local} from 'wix-storage';
import wixData from 'wix-data';
$w.onReady(function () {
var sameWord = local.getItem("searchWord");
$w("#searchBar").value = sameWord;
$w("#searchBar").placeholder = sameWord;
$w('#Membersdataset').onReady(function () {
search();
});
});
export function searchButton_click() {
search();
}
function search() {
wixData.query('members')
.contains('name', $w("#searchBar").value)
.or(wixData.query('members').eq('city', $w("#searchBar").value))
.find()
.then(res => {
$w('#repeater1').data = res.items;
});
}

I have attached some screenshot for your understanding
Please help me

1366×768 84.5 KB

1366×768 124 KB

1366×768 70.2 KB

4

You need to make sure that the dataset name is the dataset ID name.

Hover over your dataset icon on the page and it should show you the dataset elements ID name on the top left.

It might be something like #dataset1 if you haven’t changed the ID name yourself.

This ID is what you need to be using here in your code.

Or you can try editing Nayeli’s code and move that line for your datasets own onReady function and wrap it up with the pages onReady function like this.

$w.onReady( () => {
  $w("#myDataset").onReady( () => {