jQuery Search Form - How to direct to internal pages
嘿,伙计们,我是新来的。我用一个自动完成脚本创建了我的第一个javascript搜索表单。一切都很好地工作,但我很难找到如何让它在用户搜索他的产品后,他们可以点击"回车",他们将被指向相应的"产品"URL页面。
操作步骤-1。搜索产品名称2。点击的Enter或点击Search Output,并指向相应的项目页面。(例如www.website.com/product_)
我在做一个关于如何用货币填充的教程时创建了这个,但是我对jquery和javascript非常陌生。有人对如何实现这个基本搜索功能有什么建议吗?
这是一个演示
我还忘了提到,要激活自动完成脚本,只需从JS文件中输入表单的编号即可(例如00.15b,00.2c),然后我希望它能够链接到我为每个"表单"选择的URL(00.15b,00.2c)。
因此,如果用户选择00.15b,它将引导他们进入网页。(例如www.website.com/form_00_15b)
谢谢!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | $(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 from currencies[] array $('#autocomplete').autocomplete({ lookup: currencies, onSelect: function (suggestion) { var thehtml = 'Currency Name: ' + suggestion.value + ' Symbol: ' + suggestion.data; $('#outputcontent').html(thehtml); } }); }); |
了解如何使用jquery转到URL吗?有关在JS中打开不同页面URL的建议
1 2 3 4 5 6 | //As an HTTP redirect (back button will not work ) window.location.replace("http://www.google.com"); //like if you click on a link (it will be saved in the session history, //so the back button will work as expected) window.location.href="http://www.google.com"; |
因此,要打开包含所选项目的URL组件的页面,您需要执行以下类似操作:
1 2 3 4 5 6 7 8 9 | // setup autocomplete function pulling from currencies[] array $('#autocomplete').autocomplete({ lookup: currencies, onSelect: function (suggestion) { // var thehtml = 'Currency Name: ' + suggestion.value + ' Symbol: ' + suggestion.data; // $('#outputcontent').html(thehtml); window.location.href="http://yoursite.com/product_" + suggestion.value; } }); |
您可能还希望使用jquery和绑定到表单输入更改事件,并在那里使用相同的方法,而不是使用autocomplete onselect。