7

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

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

例子：

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

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

谢谢你！

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

如果我输入“ ODE ”

它会显示“C ODE ”和“ ODE SSA”

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

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

4

6 回答 6

10

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

我使用了一个简单的技巧，即从服务器返回的数据是一组由换行符“\n”分隔的字符串，每一行都有一个格式为建议::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 部分并重定向。希望有帮助。

于 2009-09-01T22:13:16.010 回答
3

这是有关如何构建自动完成搜索的完整演练。

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

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

按回车键或单击选择。

编辑：

来自自动完成文档

搜索页面替换

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

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
});
于 2009-09-01T22:09:20.933 回答
2

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

我认为通过调用 form.submit()替换消息框警报（在示例页面中）很容易完成。不过，我还没有尝试过。

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

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

function submitTheForm(){ 
     // redirect user to whatever URL
}
于 2009-09-01T22:06:40.207 回答
1

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

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

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

  1. 搜索词
  2. 与该术语相关的 URL

例如。

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

马特达蒙|/演员/mattdamon

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

于 2010-11-07T13:12:34.370 回答
0

您可以在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;
    }
});
于 2013-12-16T13:03:56.077 回答
0

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

于 2010-02-19T07:43:13.993 回答