Materialize CSS自动补全优化：选中选项时显示对应图片

嘿，刚好能帮你搞定这个需求！Materialize默认的autocomplete组件确实只会渲染文本，但我们可以通过它提供的自定义钩子，实现“选项+图片”的展示效果，甚至选中后在输入框里也同步显示图片+文本。下面是完整的解决方案：

首先，我们需要加一点基础样式，避免图片排版混乱：

/* 下拉选项里的图片样式 */
.autocomplete-content img {
  vertical-align: middle;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  object-fit: cover;
}

/* 输入框里的图片样式 */
#autocompleteGood img {
  vertical-align: middle;
  margin-right: 8px;
  width: 25px;
  height: 25px;
  object-fit: cover;
}

然后修改你的代码，核心是利用Materialize的自定义渲染钩子处理选项和选中后的显示：

HTML部分（基础结构不变） #

<div class="input-field col s6">
  <input type="text" id="autocompleteGood" class="autocomplete">
  <label for="autocompleteGood">Товар</label>
</div>

JavaScript部分 #

$(document).ready(function() {
  // 把数据单独提取，方便后续复用
  const productData = {
    'Apple': null,
    'Microsoft': null,
    'Google': 'images/juna.jpg'
  };

  $('#autocompleteGood').autocomplete({
    data: productData,
    // 自定义下拉选项的渲染模板
    renderItem: function(ul, item) {
      // 有图片路径就生成img标签，无图则留空
      const imgElement = item.image ? `<img src="${item.image}" alt="${item.label}">` : '';
      // 组合图片与文本，插入到下拉项中
      return $('<li>')
        .append(`<div>${imgElement}${item.label}</div>`)
        .appendTo(ul);
    },
    // 选中选项时，更新输入框的显示内容
    onAutocomplete: function(selectedValue) {
      const imgSrc = productData[selectedValue];
      // 根据是否有图片，生成对应的显示内容
      const displayHTML = imgSrc ? `<img src="${imgSrc}" alt="${selectedValue}"> ${selectedValue}` : selectedValue;
      $('#autocompleteGood').html(displayHTML);
    }
  });
});

关键逻辑说明： #

• renderItem是Materialize autocomplete提供的自定义渲染钩子，我们可以在这里控制每个下拉选项的HTML结构，把图片和文本结合展示
• onAutocomplete事件会在用户选中选项时触发，这里手动修改输入框的HTML内容，让它同步显示图片+文本（无图时仅显示文本）
• 对于没有图片的选项（比如Apple、Microsoft），代码会自动兼容，只展示文本内容

最后提醒下：确保你的图片路径是正确的，比如images/juna.jpg要放在项目对应目录下，不然图片会加载失败哦~

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