带有选项的 jQuery 自动完成图像

Question

我是 jQuery 的新手。但我真的很着迷。向 jQuery 团队致敬

我有一个 aspx 页面，我想在其中实现文本框的自动完成功能，用户将在其中键入以搜索产品。如果他们键入，我想在选项中显示名称为 a 的产品及其图像。I有一个包含 3 列 ProductId、ProductName 和 Image Name 的数据库表。

我尝试了 jQuery 自动完成插件 gin。但找不到满足我要求的解决方案。任何人都可以指导我如何继续吗？提前致谢。

Answer 1

您需要从服务器端代码向自动完成插件提供产品名称和图像 URL。然后，您可以覆盖插件 options 中的 formatItem修改标记。本质上，您需要创建显示名称和图片的 html。请参阅 http://jquery.bassistance.de/autocomplete/demo/ 上的图像搜索演示。这是该演示的代码:

$("#imageSearch").autocomplete("images.php", {
    width: 320,
    max: 4,
    highlight: false,
    scroll: true,
    scrollHeight: 300,
    formatItem: function(data, i, n, value) {
        return "<img src='images/" + value + "'/> " + value.split(".")[0];
    },
    formatResult: function(data, value) {
        return value.split(".")[0];
    }
});