jQuery使用选项自动完成图像

时间:2009-05-30 17:26:07

标签: jquery autocomplete

我是jQuery的新手。但是真的对它很着迷。加入jQuery团队

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

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

1 个答案:

答案 0 :(得分:4)

您需要从服务器端代码将产品名称和图片网址提供回自动完成插件。然后,您可以在插件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];
    }
});