如何在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 jquery这是一个JavaScript库。 regexp： Regexp MDN

我想您正在使用fontawesome和bootstrap。

您应该做的改进：在diffrents元素上放置一些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>