After successfully creating my first Javascript search form with an Autocomplete Script, I am facing a challenge. I want to enable users to press "enter" after searching for a product and get redirected to the corresponding product URL page.
The operation steps are as follows:
- Search for the product name
- Press enter or click on the search output to be directed to the relevant items page (e.g., www.website.com/product_234)
I followed a tutorial on populating currencies to create this feature, but I'm quite new to JQuery and Javascript. Can anyone provide advice on how to implement this basic search function?
Here is a demonstration: Demo
I forgot to mention that to activate the autocomplete script, start typing numbers from the forms listed in the JS file - for example, 00.15B, 00.2C. I would like these forms to link to a specific URL of my choice for each one (e.g., 00.15B, 00.2C).
Therefore, selecting 00.15B should redirect the user to the webpage (e.g., www.website.com/form_00_15b)
Thank you!
$(function(){
var currencies = [
{ value: '00.15B', data: 'ButtHole' },
{ value: '00.2C', data: 'ALL' },
// List of currencies continues...
];
// Setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
$('#outputcontent').html(thehtml);
}
});
});