JQuery的自动完成当结果链接 [英] JQuery Autocomplete Where the Results are Links
本文介绍了JQuery的自动完成当结果链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个jQuery自动完成框，建议适用autcomplete的话是链接（类似Facebook或Quora的会发生什么）。
基本上，我想自动完成结果砸下去，我希望人们能够点击他们，被导航到不同的页面。这里是我当前使用的code
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;链接HREF =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css的rel =stylesheet属性类型=文/ CSS/＆GT;
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js＆GT;＆下; /脚本＆GT; ＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（＃输入自动完成）。自动完成（{
来源：[斯宾塞克莱恩，测试测试测试测试测试测试测试测试测试，PHP，ColdFusion的，JavaScript的，ASP，红宝石]
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;车身风格=FONT-SIZE：62.5％;＆GT;＆LT;输入ID =自动完成/＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
这是简单的。源更改为对象，如数组：
VAR源= [{值：www.foo.com
标签：斯宾塞克莱恩
}，
{值：www.example.com
标签：詹姆斯·邦德
}，
...
];
刚刚使用select方法来重定向到价值，例如：
$（文件）。就绪（函数（）{
$（＃输入自动完成）。自动完成（{
来源：来源，
选择：函数（事件，UI）{
window.location.href = ui.item.value;
}
}）;
}）;
I am trying to create a JQuery Autocomplete box where the words being suggested for autcomplete are links (similar to what happens on Facebook or Quora).
Basically, I want the autocomplete results to drop down and I want people to be able to click on them and be navigated to a different page. Here is the code I am currently using
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: ["Spencer Kline", "Test Test Test Test Test Test Test Test Test", "php", "coldfusion", "javascript", "asp", "ruby"]
});
});
</script>
</head>
<body style="font-size:62.5%;">
<input id="autocomplete" />
</body>
</html>
解决方案
This is simple. Change your source to an array of objects, such as:
var source = [ { value: "www.foo.com",
label: "Spencer Kline"
},
{ value: "www.example.com",
label: "James Bond"
},
...
];
The just use the select method to redirect to the 'value', e.g.:
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: source,
select: function( event, ui ) {
window.location.href = ui.item.value;
}
});
});
这篇关于JQuery的自动完成当结果链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
