jQuery 自动完成图像 [英] jQuery autocomplete with images

问题描述

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

I want to implement an autocomplete feature with images in my website.

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

I would like to use the jQuery autocomplete plugin.

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

I had a look at their sample code.

谁能解释一下以下代码在 $(document).ready() 事件中的含义:

Can anyone explain me what the below code means in $(document).ready() event:

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

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

My ultimate requirement is when I type some letters in the text box, I want the options to come with an image associated with it.

推荐答案

参考:http://api.jqueryui.com/autocomplete/

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

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

Apply pluging autocomplete to all fields #imageSearch. First parameter I guess it the page that generates the response based on what is entered (images.php);

        width: 320,

下拉框的宽度

        max: 4,

最大建议

        highlight: false,

突出显示真/假

        scroll: true,

滚动条又名下拉列表，或者只是下面的一个长 div.

Scroll bar aka drop-down kind of list, or just a long div under.

        scrollHeight: 300,

自动完成下拉的高度.

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

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

How to format the response returned from images.php.

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

如果用户选择其中一项，如何返回值.

How to return the value, if the user selects one of the choices.

});

右括号:p

这篇关于jQuery 自动完成图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！