可点击的自动完成，如谷歌答案

【问题标题】：Clickable autocomplete, like google可点击的自动完成，如谷歌
【发布时间】：2013-12-16 21:21:30
【问题描述】：

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

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

示例：

用户类型“goo” 然后为他出现 GOOGLE，当他点击 GOOGLE 时，脚本会将他发送到 www.google.com （如“谷歌”=>“http://www.google.com”）

如果我能按照我告诉你们的脚本来做就好了我不是程序员，所以我需要代码本身，我知道要求太多，但我尝试了一切=\

谢谢！

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

如果我输入“ODE”

它会显示“CODE”和“ODESSA”

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

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

【问题讨论】：

标签： jquery autocomplete onclick jquery-autocomplete

【解决方案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 部分并重定向。希望对您有所帮助。

【讨论】：

能不能不返回JSON，然后可以跳过丑陋的字符串拆分？

【解决方案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
});

【讨论】：

【解决方案3】：

“但是连作者都不知道怎么做”？？

我认为通过调用 form.submit() 替换消息框警报（在example page 中）很容易完成。不过我没试过。

编辑： 这是一些使用http://dyve.net/jquery/?autocomplete的示例代码：

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

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

【讨论】：

这是我的第一个想法；但我对 js 或 jQuery 不太擅长。我以为我错过了什么。我很想知道它是否解决了问题。
这行得通。 jquery-autocomplete 项目的正确 url 现在是 code.google.com/p/jquery-autocomplete

【解决方案4】：

如果用户选择建议的结果之一，以下代码对我来说可以很好地将带有远程数据源（MySQL 数据库）数据的搜索框变成搜索字段和重定向器：

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

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

搜索词
与该术语相关的 URL

例如。

布拉德皮特|/演员/布拉德皮特

马特达蒙|/actors/mattdamon

jQuery 自动完成自动分隔管道 (|) 和新行处的数据

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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;
    }
});

【讨论】：