Hey guy I have a working search box & button, but the problem is when you type in the word you wish to find you have to click on the button to search. Is their how when a user types in the keyword, cant we give the option to press “enter key” or button to search in the table is this possible?
Try to attach an event to the text onChange or onKeyPress. Then you will get an event and then use the below.
if (event.keyCode == 13) { your code here }
So something like this…
if (event.keyCode == 13) { export function textInput1_change(event, $w) {}
}
If the code above is wrong, this is the full code I used for my search box code…
export async function searchButton_onClick() {
const { value } = $w('#textInput1');
const { items } = await wixData
.query('BlogPost')
.contains('title', value)
.or(wixData.query('BlogPost').contains('tags', value))
.or(wixData.query('BlogPost').contains('data', value))
.or(wixData.query('BlogPost').contains('autor', value))
.or(wixData.query('BlogPost').contains('categorias', value))
.or(wixData.query('BlogPost').contains('descricao', value))
.find();
const resultsTable = $w('#table1');
resultsTable.rows = items;
resultsTable.show();
console.log("Dataset is search for now filtered by the name of " + $w('#textInput1').value);
}
You need to fire the search code in a function and that function you need to call from both searchButton_onClick and the the text field.
export function input1_keyPress(event, $w) {
if (event.keyCode == 13) {
// execute search function here
searchNow($w(“input1”).value);
}
}
export function searchButton_onClick() {
// call your search function here
searchNow($w(“input1”).value);
}
export function searchNow(searchString) {
let value = $w(‘#textInput1’).value;
and so on…
}
I don’t use await, I use promises, you can see a free video about using promises and queries on wixshow.com.
Sorry I could get your code connected… Is it maybe the “await” isn’t letting your code go though?
Could you take a look at my code:
export async function searchButton_onClick() {
const { value } = $w('#textInput1');
const { items } = await wixData
.query('BlogPost')
.contains('title', value)
.or(wixData.query('BlogPost').contains('tags', value))
.or(wixData.query('BlogPost').contains('data', value))
.or(wixData.query('BlogPost').contains('autor', value))
.or(wixData.query('BlogPost').contains('categorias', value))
.or(wixData.query('BlogPost').contains('descricao', value))
.find();
const resultsTable = $w('#table1');
resultsTable.rows = items;
resultsTable.show();
}
What happens if you execute a console.log(value); and also console.log(items); do that execute at all? I don’t believe you can or should have async in your function, haven’t seen that in Wix Code at all and don’t feel they support that instead of promises.
My event.keycode is always undefined . Below is the sample code??
export function txtSearch_keyPress(event, $w) {
//Add your code for this event here:
console.log(event.keyCode)
if (event.keyCode == 13) {
Search($w(“#cboCategory”).value,$w(“#txtSearch”).value.trim(),$w(“#repeater1”));
}
Is this a bug in Wix?
Ok, i have figured this out. In Wix code it is event.key and not event.keyCode
Hi,
I want the text input to work like a search bar, and to enable the search pressing the ‘enter key’
I tried this, and it didn’t work
export function searchInput_keyPress(event, $w) {
if (event.key === 13) {
$w("#dynamicDataset").setFilter(wixData.filter()
.contains("title", $w("#searchInput").value)
.contains("categorie", $w("#categorieInput").value)
.contains("vendeur", $w("#vendeurInput").value));
}
}
What error do you get in the console? Have you logged the values of the controls like
console.log($w(“#categorieInput”).value); so you are sure the values you need are stored?
What do you mean ? I didn’t get any error, it simply doesn’t work when I press enter after typing a key word in the input field.
Where should I put that line ?
Other lines (categorie and vendeur) are here so other dropdown menu options are taken into account when the user presses enter.
Tristan, try:
if (event.key === “Enter”) { your code here;}
Thanks a lot, it worked !
I need help with the same. I want users to be able to search by either key press enter or clicking enter. This is my code below and the URL is https://www.easternstyles.com/search Any help will be appreciated.
$w.onReady(function () {
$w(‘#table1’).hide();
});
export function searchbutton17_onClick() {
$w(‘#table1’).show(“FadeIn”);
wixData.query(‘Item’)
.contains(‘title2’, $w(‘#input1’).value)
.or(wixData.query(‘Item’).contains(‘title’, $w(‘#input1’).value))
.or(wixData.query(‘Item’).contains(‘subCategory’, $w(‘#input1’).value))
.or(wixData.query(‘Item’).contains(‘topCategory’, $w(‘#input1’).value))
.or(wixData.query(‘Item’).contains(‘code’, $w(‘#input1’).value))
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
})
.catch(err =>
{
console.log("problem in search! " + err);
});
}
Hey !
Here is my code :
//searches keywords typed upon pressing 'Enter'
export function searchInput_keyPress(event, $w) {
if (event.key === "Enter") {
//shows loading screen while loading data
$w('#loader').show();
let filter = wixData.filter();
if ($w("#checkbox1").checked)
{
filter=filter.ne("dispo", true);
}
filter = filter
.contains("title", $w("#searchInput").value)
.contains("categorie", $w("#categorieInput").value)
.contains("vendeur", $w("#vendeurInput").value)
.contains("type", $w("#typeRadio").value);
$w("#dynamicDataset").setFilter(filter)
//hides loading screen after data was retrieved
.then( () => {
$w('#loader').hide();
});
}
}
I tried to find onkeypress function in the properties in search bar. But I cant find it. How can I get it?
Step 1: Find Code in header and select “Turn on Developer Tools”
Step 2: Go into tools and turn on “Properties Panel”
Step 3: Click on the element you want to use and it will pop up in the properties panel.
Hope this helps!
April 2018