jqueryui自動完成自定義渲染項如何賦值

如何為自動完成生成的元素賦值。我嘗試這樣做

$(document).ready(function() {
  $.widget("custom.iconselectmenu", $.ui.selectmenu, {\
    _renderItem: function(ul, item) {
      var li = $("\<li\>"),
        wrapper = $("\<div\>", {
          text: item.label
        });
      if (item.disabled) {
        li.addClass("ui-state-disabled");
      }
      if (item.value == 1) {
        $("\<img src=".. / img / web.png " /\>", {}).appendTo(wrapper);
      }
      $("\<span style='display:none' \>"   item.value   "\</span\>", {}).appendTo(li);
      return li.append(wrapper).appendTo(ul);
    }
  });
  $("#people").iconselectmenu().iconselectmenu("menuWidget").addClass("ui-menu-icons avatar");
});

$('#people').on('change', function() {
  $('.uiselectmenutext').html("111");
}).change();

還有其他方法嗎？

uj5u.com熱心網友回復：

考慮以下基于 jQuery UI Selectmenu Demo構建的示例。

$(function() {
  $.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function(ul, item) {
      var li = $("<li>"),
        wrapper = $("<div>").html(item.label);
      if (item.disabled) {
        li.addClass("ui-state-disabled");
      }
      if (item.value == 1) {
        $("<img>", {
          src: "../img/web.png"
        }).appendTo(wrapper);
      }
      $("<span>").css("display", "none").html(item.value).appendTo(li);
      return li.append(wrapper).appendTo(ul);
    }
  });

  $("#people").iconselectmenu().iconselectmenu("menuWidget").addClass("ui-menu-icons avatar");

  $('#people').on('change', function() {
    $('.uiselectmenutext').html("111");
  }).change();
});

h2 {
  margin: 30px 0 0 0;
}

fieldset {
  border: 0;
}

label {
  display: block;
}


/* select with custom icons */

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
  padding: 0.5em 0 0.5em 3em;
}

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
  height: 24px;
  width: 24px;
  top: 0.1em;
}

.ui-icon.video {
  background: url("images/24-video-square.png") 0 0 no-repeat;
}

.ui-icon.podcast {
  background: url("images/24-podcast-square.png") 0 0 no-repeat;
}

.ui-icon.rss {
  background: url("images/24-rss-square.png") 0 0 no-repeat;
}


/* select with CSS avatar icons */

option.avatar {
  background-repeat: no-repeat !important;
  padding-left: 20px;
}

.avatar .ui-icon {
  background-position: left top;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="demo">
  <form action="#">
    <h2>Selectmenu with framework icons</h2>
    <fieldset>
      <label for="people">Select a File:</label>
      <select name="filesA" id="people">
        <option value="1" data-class="ui-icon-script">jQuery.js</option>
        <option value="2" data-class="ui-icon-image">jQuery Logo</option>
        <option value="3" data-class="ui-icon-script">ui.jQuery.js</option>
        <option value="4" selected="selected" data-class="ui-icon-image">jQuery UI Logo</option>
        <option value="5" disabled="disabled" data-class="ui-icon-help">Some unknown file</option>
      </select>
    </fieldset>
  </form>
</div>

目前尚不清楚為什么您的代碼中有額外的斜杠。創建新物件時不需要這些。此外，您將希望從小部件定義之外呼叫自定義小部件。

標籤：jQueryjQuery-ui

上一篇：將陣列值與字串匹配的awk不起作用

下一篇：即使遵循相同的腳本，日期選擇器也不起作用