How do I assign values to elements generated by autocomplete. I Attempts to do so

$(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();

Is there any other way?

CodePudding user response：

Consider the following example built on the 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 >
  <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->jQuery.js</option>
        <option value="2" data->jQuery Logo</option>
        <option value="3" data->ui.jQuery.js</option>
        <option value="4" selected="selected" data->jQuery UI Logo</option>
        <option value="5" disabled="disabled" data->Some unknown file</option>
      </select>
    </fieldset>
  </form>
</div>

It is not clear why you had additional slashes in your code. These should not be needed when creating new Objects. Additionally, you will want to call the Custom Widget from outside the definition of the widget.