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

Popular posts from this blog

1111. appearing after print sequence - php -

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -