0

I have a datalist with some options and it's also storing the value I'm searching. I want to add a delete button (X) or trash icon beside the options to delete the selected item but it's not working. The code I have is-

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

       </Datalist>

The code I tried to make delete button in options is-

<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>

The button not showing beside the option, if it will show then I can use jQuery to make the button work but I don't know where I'm wrong, if there is any other way to make this work, please suggest. Thank you!

Kareem Dabbeet
  • 3,838
  • 3
  • 16
  • 34
Angie
  • 25
  • 6
  • If i'm not wrong a datalist can't have other children than Option. If you want to trigger an action when you select test1 you should use onChange event. – Nico Aug 09 '19 at 08:08
  • but I need to display the icon too, is there anyway to make it possible? or anyother way? I can not use dropdown list. – Angie Aug 09 '19 at 08:16
  • If you want to get over this problematics i recommend you to create an element that act like a data list. And use some html/css/js to make it works. If you still block on this, i will try to give you an answer during my free time. – Nico Aug 09 '19 at 09:26
  • I don't know how to create elemet, it must be in javascript using dom I guess, but if you will help me, this would be great – Angie Aug 09 '19 at 09:35

1 Answers1

0

I made a rough example of how you can workaround your issue. And how to create a "fake datalist". If you don't get all my code you may check this : Jquery jquery it's a JavaScript library. regexp :Regexp MDN

I presume you are using fontawesome and bootstrap.

Improvements you should do : Putting some css on the diffrents elements to make it look better. Modifiying some function to fit your needs.

Check the snippet below. If some points still unclear feel free to comment.

$(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>
Nico
  • 518
  • 2
  • 11