Question

我正在寻找没有“提交”按钮的自动填充功能，但是当用户点击自动完成关键字时，他会被重定向到另一个网址，我会选择

我正在使用http://dyve.net/jquery/?autocomplete，我想在这个脚本中实现，而不是使用任何其他（因为如果我在这个中键入ODE，他会显示CODE和ODESSA）

示例：

用户类型“goo” 然后他出现了GOOGLE，当他点击GOOGLE时脚本将他发送到www.google.com （例如“Google”=＆gt;“http://www.google.com”）

如果我能用我告诉你们的剧本，那就太棒了我不是程序员，所以我需要，代码本身，我知道它太多了，但我尝试了一切= \

谢谢你！

jUI自动完成的问题是我想这样做：

如果我输入“ ODE ”

它会显示“C ODE ”以及“ ODE SSA”

不仅仅是从一开始，这就是为什么我试图在另一个中使用你的代码

另外，当我使用Russ和karim79的代码时，它没有工作

Answer 1

我实现了类似的东西，但是，我的实现使用了jQuery UI Autocomplete。

我使用一个简单的技巧，从服务器返回的数据是由换行符“\ n”分隔的一组字符串，每行都有一个格式为 suggestion :: url 。在客户端上，我只是在分隔符处拆分（我使用 :: ）并从结果数组的第一个偏移量中提取建议，从第二个偏移量中提取URL。例如：

$("#search").autocomplete("/some/page", { selectFirst: false, formatItem: function(data, i, n, value) { //make the suggestion look nice return "<font color='#3399CC'>" + value.split("::")[0] + "</font>"; }, formatResult: function(data,value) { //only show the suggestions and not the URLs in the list return value.split("::")[0]; } }).result(function(event, data, formatted) { //redirect to the URL in the string var pieces = formatted.split("::"); window.location.href = pieces[1]; });

为了澄清我的意思，假设你键入'goo'。服务器可能会返回：

google::www.google.com\ngoodstuff::www.example.com

该用户会看到一个列表显示为'google'和'goodstuff'。单击其中一个将执行自动完成的result方法，我只需获取字符串的URL部分并重定向。希望有所帮助。

Answer 2

这是complete walkthrough on how to build an autocomplete search。

基本上，您需要有一个事件处理程序来调用

window.location.href = "your-url-string.com";

按下输入或点击选择。

修改

来自autocomplete documentation


搜索页面替换

可以使用自动完成插件   搜索一个术语并重定向到一个   与结果项关联的页面。   以下是一种实现方式   重定向：

var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ]; $("...").autocomplete(data, { formatItem: function(item) { return item.text; } }).result(function(event, item) { location.href = item.url; // navigate to the chosen URL });

Answer 3

“但即便是作者也不知道如何制作这个”??

我认为可以通过调用form.submit（）替换消息框警报（在example page中）来轻松完成。不过我还没试过。

修改： 以下是使用http://dyve.net/jquery/?autocomplete的一些示例代码：

$("#mytextbox").autocomplete("form.php", {onItemSelect:submitTheForm});

function submitTheForm(){ 
     // redirect user to whatever URL
}

Answer 4

以下代码适用于我将远程数据源（MySQL数据库）中的数据转换为搜索字段的搜索框以及用户选择建议结果之一时的重定向器：

$("#search").autocomplete("search.php", {
    width: 260,
    formatItem: function(data) {
            return data[0];
          }
        }).result(function(event, data) {
     window.location.href = data[1];
});

注意：我必须将ajax数据分成两部分：

搜索字词
与该字词相关的网址

例如

布拉德皮特| / actors / bradpitt

Matt Damon | / actors / mattdamon

jQuery autocomplete自动分隔管道（|）和每个新行

Answer 5

jQuery Autocomplete插件有一个matchContains选项，可以在结果中搜索。将其设置为true，它也将返回子字符串匹配。

Answer 6

您可以在JSFiddle

找到最简单的示例

var data = [
    {
        value: 'Google',
        url: 'http://www.google.com'
    },
    {
        value: 'StackOverflow',
        url: 'http://www.stackoverflow.com'
    }
];

$("input").autocomplete({
    source: data,
    select: function(event, ui) {
        window.location = ui.item.url;
    }
});

可点击的自动填充功能，如谷歌

6 个答案: