来自 URL 查询字符串的 jQuery 自动完成搜索

Posted 2023-05-09

【中文标题】来自 URL 查询字符串的 jQuery 自动完成搜索

【英文标题】：jQuery Autocomplete search from URL query string

【发布时间】：2017-10-26 12:37:13

【问题描述】：

我有一个当前正常工作的输入，可以正确搜索 JSON 数组并根据所选内容显示内容。但是，我正在尝试向搜索工具添加功能，使其能够接受 URL 中的查询字符串。

即：“site.com?s=test”将填充输入并搜索“test”

我能够正确解码 URI，并将变量传递给输入。但是，它不会“搜索”，实际上需要删除一个字符并重新输入它才能接受搜索词。

这是我正在使用的 jQuery 自动完成功能：https://github.com/devbridge/jQuery-Autocomplete

我还要注意，我可以将搜索词粘贴到输入中，它会搜索，但如果它从 URL 中获取值，它似乎会忽略搜索功能。

            var urlParams;
            (window.onpopstate = function () 
                var match,
                    pl     = /\+/g,  // Regex for replacing addition symbol with a space
                    search = /([^&=]+)=?([^&]*)/g,
                    decode = function (s)  return decodeURIComponent(s.replace(pl, " ")); ,
                    query  = window.location.search.substring(1);

                urlParams = ;
                while (match = search.exec(query))
                   urlParams[decode(match[1])] = decode(match[2]);
            )();

            $("#input").val(urlParams["s"]);

            $("#input").autocomplete(
                lookup: names,
                onSelect: function (suggestion) 
                    // code here for output
                
            );

不知道我错过了什么。

jfyi - 问题标签一直默认为 jquery-ui-autocomplete 而不是 jquery-autocomplete。很抱歉造成混乱。

【问题讨论】：

由于我在这个插件的源代码中找不到任何有价值的东西来回答你的问题，我建议你使用 JQuery UI 的自动完成小部件，并在 @ 987654323@ 甚至被触发（只需确保 search 函数等待您的 ajax 调用提供源。）

@JeffNoel 这确实不是一个合适的解决方案，这需要彻底改变已经工作的工具。

【参考方案1】：

我没有在插件的源代码中找到任何可以帮助您的东西，但这里有一个替代解决方案，使用 jQuery UI 的自动完成小部件。

---

您始终可以从 jQuery UI 自动完成小部件触发 .search() 方法。

这是它的作用：

触发搜索事件并在事件未取消时调用数据源。可以被类似选择框的按钮用来在单击时打开建议。当不带参数调用时，使用当前输入的值。

您所要做的就是确保从远程数据源（来自 AJAX 调用）向源提供最新信息。您可以在following answer 中找到如何执行此操作。

【参考方案2】：

我能够成功地将 URL 值传递给输入，并通过将以下代码放入 setTimeout 函数中进行搜索（1000 对我有用）：

        $('#input').autocomplete('onValueChange');

当值在自动完成有机会启动之前被传递时，问题似乎出现了。