清除后如何添加清除输入字段选项和刷新选项列表？

Question

I have this HTML form example https://jsfiddle.net/j8re1cqa/

<form id="mainForm" method="post">
  <input type="text" name="uniqueItem" list="itemlist">
  <datalist id="itemlist">
      <option data-value="10010">Placeholder name</option>
      <option data-value="10006">Random name</option>
    </datalist>
  <input id="sendButton" type="submit" value="Submit">
</form>

How do I add a right-aligned icon inside input field to clear the input data? There is an X in MS Edge, but there is no clear button visible in Chrome and Firefox. In Firefox, the drop-down list is not even loading before you start typing.

When I delete the input data using backspace, the drop-down list refreshes only after I also left-click into the input field again. This feels really awkward and redundant. How to auto-refresh list when the interest keyword has more options again or when input field is empty?

Answer 1

我决定使用jQueryflexdatalist库： projects.sergiodinislopes.pt/flexdatalist/它提供了简单的实现和样式，这是默认数据列表无法很好完成的。