如何为jQuery UI Autocomplete自定义渲染项赋值？是否有其他方法？

你当前的实现是通过监听change事件直接修改类选择器匹配的元素内容，以下是几种更贴合jQuery UI组件设计的替代实现方式：

方式一：通过组件widget()方法精准定位显示容器 #

jQuery UI Selectmenu的widget()方法会返回生成的按钮容器，可直接定位内部文本元素修改，避免全局类选择器的潜在冲突：

$('#people').on('change', function() {
  const selectedValue = $(this).val();
  // 通过widget()获取组件按钮容器，修改显示文本
  $(this).iconselectmenu('widget').find('.ui-selectmenu-text').text(selectedValue);
}).change();

方式二：在自定义组件内部扩展_select方法 #

既然自定义了iconselectmenu组件，可直接在组件内部扩展_select方法，选中项时自动更新显示内容，逻辑更内聚：

$.widget("custom.iconselectmenu", $.ui.selectmenu, {
  _renderItem: function(ul, item) {
    const 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);
    }
    return li.append(wrapper).appendTo(ul);
  },
  // 扩展_select方法，继承原有逻辑同时更新显示
  _select: function(event, ui) {
    this._super(event, ui);
    this.widget().find('.ui-selectmenu-text').text(ui.item.value);
  }
});

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

这种方式无需额外绑定全局change事件，组件自身即可处理赋值逻辑。

方式三：结合val()与refresh()同步赋值 #

如果需要在外部触发赋值（比如初始化设置默认值），可通过val()设置值后调用refresh()让组件同步显示，再按需修改内容：

// 初始化设置默认值并同步组件状态
$("#people").val("1").iconselectmenu("refresh");

// 自定义显示内容
$('#people').iconselectmenu('widget').find('.ui-selectmenu-text').text("自定义内容");

内容的提问来源于stack exchange，提问作者starry