Question

我想在我的网站上使用图片实现自动完成功能。

我想使用jQuery自动完成插件。

我查看了他们的示例代码。

任何人都可以解释下面代码在$（document）.ready（）事件中的含义：

$("#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];
  }
});

我的最终要求是当我在文本框中输入一些字母时，我希望选项附带与之关联的图像。

Answer 1

使用此参考：http://api.jqueryui.com/autocomplete/

$("#imageSearch").autocomplete("images.php", {

将插入自动完成应用于所有字段#imageSearch。第一个参数我猜它是根据输入的内容生成响应的页面（images.php）;

        width: 320,

下拉宽度

        max: 4,

最高建议

        highlight: false,

突出显示true / false

        scroll: true,

Scroll bar又名下拉列表，或者只是一个长div。

        scrollHeight: 300,

自动完成下拉的高度。

        formatItem: function(data, i, n, value) {
            return "<img src='images/" + value + "'/> " + value.split(".")[0];
        },

如何格式化从 images.php 返回的响应。

        formatResult: function(data, value) {
             return value.split(".")[0];
        }

如果用户选择其中一个选项，如何返回该值。

});

结束括号：p

Answer 2

这是关于Jquery Autocomplete PLUGIN，实际的Jquery UI自动完成中没有formatItem和formatValue这样的选项。

我建议大家阅读此http://www.learningjquery.com/2010/06/autocomplete-migration-guide，其中介绍了如何从旧的插件版本迁移到官方UI小部件。

为了让你自动完成使用建议列表中的图像，你应该阅读这个主题：http://forum.jquery.com/topic/using-html-in-autocomplete

jQuery自动完成图像

2 个答案: