Question

我有一段时间弄清楚为什么我的 jQuery autocomplete 包含类别和格式化结果无效。我在SO上经历了一系列类似的问题，并尝试了我能找到的所有建议，但似乎没有任何工作。

虽然显示正确，但不会将列表项追加到顶部ul。它添加一个，然后将每个后续结果附加到同一个列表项。这意味着焦点和选择方法无法按预期工作。

我试过了：

_renderItemData(ul, item)与_renderItem(ul, item)
在.data("item.autocomplete", item)

renderItem()

将.data("item.autocomplete", {})附加到ul.append中 renderMenu方法
更改类别列表项中使用的类。

任何帮助将不胜感激。谢谢！

以下是完整代码和fiddle：

$(function () {
  function format(item) {
    var cell = '';

    $.each(item.value, function(index, value) {
      cell += "<a class='ui-autocomplete-thumbnail-link' href='" + value.url + "'>";

      cell += "<img class='ui-autocomplete-thumbnail-image' src='" + value.images.small + "' />";

      cell += value.presentation + "</a>";
    });

    return cell;
  }

  $.widget( "custom.categorycomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
      var self = this, current_category = '';

      $.each(items, function(index, item) {
        if (item.label !== current_category) {
          current_category = item.label;
          ul.append($("<li class='ui-category'>" + current_category + "</li>").data("item.autocomplete", {}));
        }

        self._renderItem(ul, item);
      });
    }
  });

var    jsondata = [
    {
        "value": [
            {
                "id": 1,
                "name": "category1-name1",
                "presentation": "category1-presentation1",
                "url": "example.com/category1-url1",
                "images": {
                    "small": "http://sipi.usc.edu/database/preview/misc/4.1.07.png"
                }
            },
            {
                "id": 2,
                "name": "category1-name2",
                "presentation": "category1-presentation2",
                "url": "example.com/category1-url2",
                "images": {
                    "small": "http://sipi.usc.edu/database/preview/misc/4.1.08.png"
                }
            }
        ],
        "label": "category1"
    },
    {
        "value": [
            {
                "id": 3,
                "name": "category2-name1",
                "presentation": "category2-presentation1",
                "url": "example.com/category2-url1",
                "images": {
                    "small": "http://sipi.usc.edu/database/preview/misc/4.1.01.png"
                }
            },
            {
                "id": 4,
                "name": "category2-name2",
                "presentation": "category2-presentation2",
                "url": "example.com/category2-url2",
                "images": {
                    "small": "http://sipi.usc.edu/database/preview/misc/4.1.03.png"
                }
            }
        ],
        "label": "category2"
    }
];

  $('#s1').categorycomplete({
    source: jsondata,
    select: function (event, ui) {
      window.location.href = ui.item.value[0].url.replace(window.location.host, '');

      return false;
    }
  })
  .data( "categorycomplete" )._renderItem = function( ul, item ) {
    return $( "<li>" )
    .data("item.autocomplete", item)
    .append(format(item))
    .appendTo(ul);
  };
});

Answer 1

你可能想要这样的东西，注意重组的JSON：

$(function () {
  function format(item) {
    var cell = '';   
      cell += "<a data-url='"+item.url+"' class='ui-autocomplete-thumbnail-link' '>";
      cell += "<img class='ui-autocomplete-thumbnail-image' src='" + item.images.small + "' />";
      cell += item.name + "</a>";  

    return cell;
  }

  $.widget( "custom.categorycomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
      var self = this, current_category = '';

      $.each(items, function(index, item) {
        if (item.label !== current_category) {
          current_category = item.label;
          ul.append($("<li class='ui-category'>" + current_category + "</li>").data("item.autocomplete", {}));
        }

        self._renderItem(ul, item);
      });
    }
  });

var jsondata = [
{
    "label": "category1-presentation1",
    "value": "category1-presentation1",
    "id": 1,
    "name": "category1-name1",
    "url": "example.com/category1-url1",
    "images": {
        "small": "http://sipi.usc.edu/database/preview/misc/4.1.07.png"
    }
},
{
    "value": "category1-presentation2",
    "label": "category1-presentation2",
    "id": 2,
    "name": "category1-name2",
    "url": "example.com/category1-url2",
    "images": {
        "small": "http://sipi.usc.edu/database/preview/misc/4.1.08.png"
    }
},
{
    "value": "category2-presentation1",
    "label": "category2-presentation1",
    "id": 3,
    "name": "category2-name1",
    "url": "example.com/category2-url1",
    "images": {
        "small": "http://sipi.usc.edu/database/preview/misc/4.1.01.png"
    }
}, 
{
    "value": "category2-presentation2",
    "label": "category2-presentation2",
    "id": 4,
    "name": "category2-name2",
    "url": "example.com/category2-url2",
    "images": {
        "small": "http://sipi.usc.edu/database/preview/misc/4.1.03.png"
    }
}
];

  $('#s1').categorycomplete({
    source: jsondata,
    select: function (event, ui) {

        $(this).val('')
        alert('Url is:'+ ui.item.url.replace(window.location.host, ''))


      return false;
    }
  })
  .data( "categorycomplete" )._renderItem = function( ul, item ) {
    return $( "<li>" )
    .data("item.autocomplete", item)
    .append(format(item))
    .appendTo(ul);
  };
});

DEMO：http://jsfiddle.net/xQEsK/

jQuery自动完成，类别，选择和焦点不起作用，列表格式不正确

1 个答案: