如何在自动补全文本旁动态显示图片？（附实现代码）

没问题，我帮你把现有代码修改成支持包含name和image属性的对象数组，实现自动补全项显示「图片+名称」的效果。下面是具体的修改点和完整代码：

核心修改点 #

• 替换数据源：把原字符串数组替换为你的对象数组
• 调整匹配逻辑：从匹配字符串改为匹配对象中的name属性
• 添加图片渲染：在自动补全的每个选项中插入图片元素，并设置基础样式
• 修正选中后的值填充：确保点击选项后输入框填入的是对象的name属性

完整修改后代码 #

HTML #

<h2>Autocomplete</h2>
<p>Start typing:</p>
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Coin">
  </div>
</form>

CSS #

* { box-sizing: border-box; }
body { font: 16px Arial; }
/*the container must be positioned relative:*/
.autocomplete { position: relative; display: inline-block; }
input { border: 1px solid transparent; background-color: #f1f1f1; padding: 10px; font-size: 16px; }
input[type=text] { background-color: #f1f1f1; width: 100%; }
input[type=submit] { background-color: DodgerBlue; color: #fff; cursor: pointer; }
.autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; /*position the autocomplete items to be the same width as the container:*/ top: 100%; left: 0; right: 0; }
.autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; display: flex; align-items: center; gap: 8px; }
/*添加图片样式，确保大小合适*/
.autocomplete-items div img { width: 24px; height: 24px; border-radius: 50%; }
/*when hovering an item:*/
.autocomplete-items div:hover { background-color: #e9e9e9; }
/*when navigating through the items using the arrow keys:*/
.autocomplete-active { background-color: DodgerBlue !important; color: #ffffff; }

JavaScript #

function autocomplete(inp, arr) {
  var currentFocus;
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      this.parentNode.appendChild(a);
      for (i = 0; i < arr.length; i++) {
          // 改为匹配对象的name属性
          if (arr[i].name.substr(0, val.length).toUpperCase() == val.toUpperCase()) {
              b = document.createElement("DIV");
              if (currentFocus === -1) {
                  currentFocus = 0;
                  b.classList.add("autocomplete-active");
              }
              // 插入图片元素
              b.innerHTML = `<img src="${arr[i].image}" alt="${arr[i].name}">`;
              // 高亮匹配的名称部分
              b.innerHTML += `<strong>${arr[i].name.substr(0, val.length)}</strong>`;
              b.innerHTML += arr[i].name.substr(val.length);
              // 隐藏输入框存储name值
              b.innerHTML += `<input type='hidden' value='${arr[i].name}'>`;
              b.addEventListener("click", function(e) {
                  inp.value = this.getElementsByTagName("input")[0].value;
                  closeAllLists();
              });
              a.appendChild(b);
          }
      }
  });

  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
          currentFocus++;
          addActive(x);
      } else if (e.keyCode == 38) {
          currentFocus--;
          addActive(x);
      } else if (e.keyCode == 13) {
          e.preventDefault();
          if (currentFocus > -1) {
              if (x) x[currentFocus].click();
          }
      }
  });

  function addActive(x) {
      if (!x) return false;
      removeActive(x);
      if (currentFocus >= x.length) currentFocus = 0;
      if (currentFocus < 0) currentFocus = (x.length - 1);
      x[currentFocus].classList.add("autocomplete-active");
  }

  function removeActive(x) {
      for (var i = 0; i < x.length; i++) {
          x[i].classList.remove("autocomplete-active");
      }
  }

  function closeAllLists(elmnt) {
      var x = document.getElementsByClassName("autocomplete-items");
      for (var i = 0; i < x.length; i++) {
          if (elmnt != x[i] && elmnt != inp) {
              x[i].parentNode.removeChild(x[i]);
          }
      }
  }

  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
}

// 替换为你的对象数组
const coinList = [
  {name: "Arweave" , image: "https://assets.coingecko.com/coins/images/4343/large/oRt6SiEN_400x400.jpg?1591059616"},
  {name: "Swipe" , image: "https://assets.coingecko.com/coins/images/9368/large/swipe.png?1566792311"},
  {name: "OMG Network", image: "https://assets.coingecko.com/coins/images/776/large/OMG_Network.jpg?1591167168"},
  {name: "Thorchain" , image: "https://assets.coingecko.com/coins/images/6595/large/thorchain.png?1547042798"}
];

// 初始化自动补全
autocomplete(document.getElementById("myInput"), coinList);

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