javascript - jQuery Search Form - How to direct to internal pages -
hey guys i'm new site. created first javascript search form autocomplete script. working perfectly, i'm having trouble finding out how can have after user searches website product can hit "enter" , directed corresponding "products" url page.
steps of operation - 1. search product name 2. hit's enter or clicks search output, , directed corresponding items page. (ex. www.website.com/product_234)
i created doing tutorial how have populate currencies, i'm new jquery , javascript. have advice on how achieve basic search function?
here demo
i forgot mention activate auto complete script start typing numbers of forms js file - (ex. 00.15b, 00.2c) i'd able link url of choice each "form" (00.15b, 00.2c)
so if user selects 00.15b direct them webpage. (ex. www.website.com/form_00_15b)
thanks!
$(function(){ var currencies = [ { value: '00.15b', data: 'butthole' }, { value: '00.2c', data: 'all' }, { value: '04-002a', data: 'dzd' }, { value: '08-010b', data: 'eur' }, { value: '10.01a', data: 'aoa' }, { value: '10.1b', data: 'xcd' }, { value: '10.3a', data: 'ars' }, { value: '20.01b', data: 'amd' }, { value: '20.01da', data: 'awg' }, { value: '20.12a', data: 'aud' }, { value: '20.15a', data: 'azn' }, { value: '20.16a', data: 'bsd' }, { value: '20.16b', data: 'bhd' }, { value: '20.17a', data: 'bdt' }, { value: '20.23a', data: 'bbd' }, { value: '20.2a', data: 'byr' }, { value: '20.33a', data: 'bzd' }, { value: '20.35a', data: 'xof' }, { value: '20.35c', data: 'btn' }, { value: '20.37a', data: 'bob' }, { value: '20.39a', data: 'bam' }, { value: '20.39b', data: 'bwp' }, { value: '20.44b', data: 'brl' }, { value: '20.44c', data: 'bnd' }, { value: '20.44d', data: 'bgn' }, { value: '20.44e', data: 'bif' }, { value: '30.12a', data: 'khr' }, { value: '40.10a', data: 'xaf' }, { value: '40.10b', data: 'cad' }, { value: '40.10c', data: 'cve' }, { value: '40.10d', data: 'kyd' }, { value: '40.1a', data: 'clp' }, { value: '40.1b', data: 'cny' }, { value: '40.4a', data: 'cop' }, { value: '40.5b', data: 'kmf' }, { value: '40.5c', data: 'cdf' }, { value: '40.5d', data: 'crc' }, { value: '40.6a', data: 'hrk' }, { value: '40.6b', data: 'cuc' }, { value: '40.6c', data: 'czk' }, { value: '41.2a', data: 'dkk' }, { value: '41.2b', data: 'djf' }, { value: '41.2c', data: 'dop' }, { value: '45.1b', data: 'egp' }, { value: '50.10a', data: 'gqe' }, { value: '50.10c', data: 'ern' }, { value: '60.13a', data: 'eek' }, { value: '60.13c', data: 'etb' }, { value: '60.13d', data: 'fkp' }, { value: '60.1a', data: 'fjd' }, { value: '60.23d', data: 'xpf' }, { value: '60.23e', data: 'gmd' }, { value: '60.4a', data: 'gel' }, { value: '60.5b', data: 'ghs' }, { value: '60.5b', data: 'gip' }, { value: '60.5e', data: 'gtq' }, { value: '60.5i', data: 'gnf' }, { value: '60.6a', data: 'gyd' }, { value: '60.7e', data: 'htg' }, { value: '60.8a', data: 'hnl' }, { value: '70.0a', data: 'hkd' }, { value: '70.0b', data: 'huf' }, { value: '70.10db', data: 'isk' }, { value: '70.23a', data: 'inr' }, { value: '70.24a', data: 'idr' }, { value: '70.25a', data: 'irr' }, { value: '70.5b', data: 'iqd' }, { value: '70.9a', data: 'ils' }, { value: '80.16a', data: 'jmd' }, { value: '80.2a', data: 'jpy' }, { value: '90.14a', data: 'jod' }, { value: '90.14b', data: 'kzt' }, { value: '90.16a', data: 'kes' }, { value: '90.3a', data: 'kpw' }, { value: '90.3b', data: 'krw' }, { value: '90.3c', data: 'kwd' }, { value: '90.5a', data: 'kgs' }, { value: '90.9b', data: 'lak' }, { value: 'allergy label', data: 'lvl' }, { value: 't20.01a', data: 'lbp' }, { value: 't20.01b', data: 'lsl' }, { value: 't20.03a', data: 'lrd' }, { value: 't20.03b', data: 'lyd' }, { value: 't20.03c', data: 'ltl' }, { value: 't20.03d', data: 'mop' }, { value: 't20.15a', data: 'mkd' }, { value: 't20.17a', data: 'mga' }, { value: 't20.23a', data: 'mwk' }, { value: 't20.23b', data: 'myr' }, { value: 't20.35c', data: 'mvr' }, { value: 't20.39a', data: 'mro' }, { value: 't20.39b', data: 'mur' }, { value: 't40.8a', data: 'mxn' }, ]; // setup autocomplete function pulling 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); } }); });
see how go url using jquery? advice on opening different page url within js
//as http redirect (back button not work ) window.location.replace("http://www.google.com"); //like if click on link (it saved in session history, //so button work expected) window.location.href = "http://www.google.com"; so open page including url component includes selected item similar following:
// setup autocomplete function pulling 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); window.location.href = "http://yoursite.com/product_" + suggestion.value; } }); you may want use jquery , bind form input change event , use same approach there rather autocomplete onselect.
Comments
Post a Comment