jQuery自动完成renderItem和renderItemData之间的区别

问题描述

我试图了解renderItem和renderItemData之间的区别.

I'm trying to understand the difference between renderItem and renderItemData.

我找不到与此相关的文档.

I could not find relevant documentation about this.

我有以下代码:

$.widget( "custom.catcomplete", $.ui.autocomplete, {
  _renderMenu: function( ul, items ) {
    var that = this,
    currentCategory = "";
    $.each( items, function( index, item ) {
      if ( item.category != currentCategory ) {
        ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
        currentCategory = item.category;
      }
      // with following code, when an element is selected
      // in menu list, the corresponding value appears in searchbox
      that._renderItemData( ul, item );
      // with following code, when an element is selected
      // in menu list, the corresponding value does NOT appear in searchbox
      // I override renderItem below
      **// that._renderItem( ul, item );**

    });
  }
});

function  handleSearchBox() {

  var data = [
    { label: "JAMES", category: "PEOPLE" },
  ];

  $( "#search" ).catcomplete({
    delay: 0,
    source: data,
    select: function(event, ui) {
      event.preventDefault();
      str = JSON.stringify(ui)
      // with renderItemData, str = item in source data
      // with renderItem str = {}
      alert(str)
      var selectedObj = ui.item.label
      $("#search").val(selectedObj);
    }
  });
 $("#search").data("custom-catcomplete")._renderItem = function(ul, item) {
                return $("<li></li>").data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
            };

}

我的目标是定制样式菜单li项目.我不确定我要去哪里错了.

My objective is to custom style menu li items. I am not sure where I am going wrong.

推荐答案

renderItem构建要附加到结果列表的实际列表项(<li>)

renderItem builds the actual list item (<li>) that is to be appended to the result list

renderItemData只是一个包装器方法，它调用renderItem并将关联的数据(标签和值)存储到创建的元素中.稍后在导航和选择建议框中的选项时使用此数据.

renderItemData is just a wrapper method that calls renderItem and stores the associated data (label and value) to the created element. This data is later used when navigating and selecting and option from the suggestion box.

您会发现两者的源代码都非常简单:

You'll find that the source code for both is pretty simple:

_renderItemData: function( ul, item ) {
    return this._renderItem( ul, item ).data( "ui-autocomplete-item", item );
},

_renderItem: function( ul, item ) {
    return $( "<li>" )
        .append( $( "<a>" ).text( item.label ) )
        .appendTo( ul );
},

您应该注意，_renderMenu实际上是在_renderItemData上调用:

And you should note that _renderMenu actually calls on _renderItemData:

_renderMenu: function( ul, items ) {
    var that = this;
    $.each( items, function( index, item ) {
        that._renderItemData( ul, item );
    });
},

这篇关于jQuery自动完成renderItem和renderItemData之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！