jQuery搜索表单-如何指向内部页面
jQuery Search Form - How to direct to internal pages
我用自动完成脚本创建了我的第一个Javascript搜索表单。一切都工作得很完美,但是我很难找到如何让用户在网站上搜索他的产品后,他们可以点击"进入"。他们将被引导到相应的"产品"。URL的页面。
操作步骤-
- 搜索产品名称
- 按回车键或点击搜索输出,并被引导到相应的项目页面。(例如www.website.com/product_234)
我创建了这个关于如何让它与货币填充的教程,但我是Jquery和Javascript的新手。有人对如何实现这个基本的搜索功能有什么建议吗?
Here is a Demo
我也忘了提一下,激活自动完成脚本只是开始从JS文件输入表单的数字- (Ex. 00.15B, 00.2C)我希望它能够链接到我选择的每个"表单"的URL;00.2 (00.15 b, c)
因此,如果用户选择00.15B,它将引导他们到网页。(例如www.website.com/form_00_15b)
谢谢!
$(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 = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
$('#outputcontent').html(thehtml);
}
});
});
参见如何使用jQuery转到URL ?关于从JS中打开不同页面URL的建议
//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组件的页面,其中包含所选项目,您将执行以下操作:
// 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);
window.location.href = "http://yoursite.com/product_" + suggestion.value;
}
});
您可能还想使用JQuery并绑定到表单输入更改事件,并使用相同的方法,而不是自动完成onSelect。
相关文章:
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 调用函数内部的函数
- 如何使用js将SNAPSHOT内部版本号转换为3位数的整数
- 在phonegap应用程序内部重定向不起作用
- 使用此选项选择父类内部的类
- 访问JSON对象内部的数组元素
- 从模块内部访问Express装载路径
- AngularJs指令,该指令创建内部有数据对象的新指令
- 如何使用内部对象构造对象
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 用Javascript修改内部标记的CSS规则
- javascript函数内部的代码用逗号而不是分号分隔
- 正在$rootScope上达到控制器作用域$在内部控制器上
- 光线投射从内部投射时不会碰到网格
- javascript无法重新定义函数内部的全局对象
- 在不移动内部文本的情况下缩放元素的效果
- Javascript:为什么"这个“;内部私有函数指的是全局范围
- “this"在私有函数内部调用时,指的是窗口
- 什么是“;这个“;指的是在一个“函数”中的函数内部;上;属性
- 访问子组件是指从父组件内部访问子组件