javascript - 如何在 HTML 的数据列表选项中添加删除按钮？

Question

我有一个包含一些选项的数据列表，它还存储了我正在搜索的值。我想在删除所选元素的选项旁边添加一个删除按钮 (X) 或垃圾桶图标，但它不起作用。我的代码是-

  <Input list="search" name="search" id="mainsearch">
      <Datalist id="search">
      <Option value="test1"></option>
      <Option value="test2"></option>
      <Option value="test3"></option>

       </Datalist>

我试图在选项中制作删除按钮的代码是-

<Input list="search" name="search" id="mainsearch">
<Datalist id="search">
      <Option value="test1"> <button class="btn"> <i class="fa 
       fa-trash" </i></button></option>
      <Option value="test2"><button class="btn"> <i class="fa 
       fa-trash" </i></button></option>
       <Option value="test3"><button class="btn"> <i class="fa 
       fa-trash" </i></button></option>
       </Datalist>

选项旁边没有显示按钮，如果它会显示，那么我可以使用 jQuery 来使按钮工作，但我不知道我哪里错了，如果有任何其他方法可以使它工作，请提出建议.谢谢你!

Answer 1

我举了一个粗略的示例来说明如何解决您的问题。以及如何创建“假数据列表”。如果你没有得到我的所有代码，你可以检查这个:查询 jquery它是一个 JavaScript 库。正则表达式:Regexp MDN

我假设您正在使用 fontawesome 和 bootstrap。

您应该做的改进: 在不同的元素上放置一些 CSS 以使其看起来更好。修改一些功能以满足您的需要。

检查下面的片段。如果仍有不清楚的地方，请随时发表评论。

$(document).ready(() => {
  var results = [{
      name: "test1",
      value: "<button class='btn btn-danger'> <i class='fa fa-trash'> </i> Test 1</button>"
    },
    {
      name: "other",
      value: "<button class='btn btn-success'> <i class='fa fa-trash'> </i>other</button>"
    }
  ] // using an object to stock all your differents data
  $("#search-block").keyup(() => { //trigger when you press a key on the input

    var value = $("#search-block").val(); // getting the value of input
    if (value != "") {
      var find = findElements(value, results); // filter results depending of your input
      setContent(find); // creating html
    } else {
      $("#content").html(""); // empty result if input is empty
    }


  })

  function setContent(data) {
    $("#content").html(""); // clean the div
    data.forEach(element => {
      $("#content").append("<p>" + element.value + "</p>"); // adding the html of each element in the div
    })
  }

  function findElements(str, data) {
    var filteredResult = [];
    data.forEach(element => {
      let reg = "(" + str + ")"; // use a reg expression (find a element that cotains str)
      var regexp = new RegExp(reg, "g"); // create the regexp
      if (element.name.search(regexp) != -1) { //use search to find if the name contains str -1 is equivalent to not found.
        filteredResult.push(element); // add to the list the element if it matches.
      } else {
        $("#content").html("no result");
      }
    })
    return filteredResult;
  }
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" id="search-block">
  <div id="content">
  </div>
</div>