带有可点击结果的 jQueryUI 自动完成

标签 jquery jquery-ui autocomplete onclick jquery-ui-autocomplete

我尝试寻找类似的案例,并找到了一些,但每次代码都略有不同,我无法找到解决方案......

我在我的网站上使用 jQuery 自动完成功能,数据来自 mysql 数据库。
结果按类别排序,以在同一输入中显示产品和品牌
所以我很自然地将他们网站上的示例粘贴到我的网站上,效果很好!
生成的 json 如下所示

{"label":"Product 1","url":"product.php?id=1","category":"Products"}

我唯一的问题是我希望结果可点击。因此,当用户单击结果时,会加载另一个页面,而不是使用数据填充输入的默认行为。

我在 jsfiddle 上创建了一个演示,以便您可以看到发生了什么
http://jsfiddle.net/fJ22W (数据包含在此处的js中)

非常欢迎您的帮助,我想这不是什么大问题,但我在 jQuery 方面的糟糕技能阻止了我解决这个问题......

伯特兰

最佳答案

使用选择事件:

$( "#search" ).catcomplete({
        source: 'suggest_zip.php',
        select: function( event, ui ) {
            window.location = ui.item.url;
        }
    });

显然,您需要对网址等进行一些验证。

就其值(value)而言,我还建议使用默认的自动完成小部件并使用事件和选项,而不是尝试从中继承。您的代码将会更加简洁,出现奇怪错误的可能性也会减少。

关于带有可点击结果的 jQueryUI 自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12299652/

相关文章:

javascript - 使用远程数据自动完成羊驼表单

javascript - 隐藏具有多个切换的元素

php - 获取类别 wordpress 中的标签 - 可过滤的投资组合

Jquery Tabs - 完全渲染之前延迟,渲染时检测

Jquery 自动完成功能不起作用

jquery - 自动完成以显示焦点上的所有选项。如何?

php - Codeigniter 中的 JQuery 自动完成编码

使用 Jquery post 时 PHP 不重定向

javascript - 如何在 iframe 元素内滚动 textarea 元素

jquery - Django/Jquery UI 对话框 - 如何将 Django 与 JqueryUI 对话框集成?