JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<label class="col-sm-2 control-label" for="city_disp"> City</label>
<div class="col-sm-5">
  <div class="input-group">
    <input type="hidden" class="hidden_value" name="city" id="city" />
    <input type="text" name="city_disp" placeholder="City" id="city_disp" data-request_type="cities" class="form-control autocomplete-input-field" autocomplete="off" />
  </div>
  <div class="selected"></div>
</div>

CSS

.selected {
  margin: 3px;
}

.selected-item {
  border: 1px solid #00f;
  border-radius: 6px;
  padding: 3px;
  background: #ccf;
  margin: 3px;
}

.selected-item .btn-close {
  margin-left: 6px;
}

JavaScript

$(function() {

  var myAutoData = [{
      label: "New York",
      value: "45"
    }, {
      label: "Washington",
      value: "56"
    },
    {
      label: "London",
      value: "78"
    }
  ];

  function newItem(it) {
    var item = $("<span>", {
      class: "selected-item",
      "data-id": it.value
    }).html(it.label);
    $("<span>", {
      class: "btn-close"
    }).appendTo(item);
    if ($("#city").val().length > 0) {
      $("#city").val($("#city").val() + "," + it.value);
    } else {
      $("#city").val(it.value);
    }
    return item;
  }

  $(".autocomplete-input-field").autocomplete({
    source: function(request, response) {
      var term = request.term;
      $.ajax({
        url: "/echo/json/",
        dataType: "json",
        type: "POST",
        data: {
          json: JSON.stringify(myAutoData),
          term: term
        },
        success: function(data) {
          response(data);
        }
      });
    },
    minLength: 2,
    select: function(event, ui) {
      $(this).parent().parent().find(".selected").append(newItem(ui.item));
      $(this).val("");
      return false;
    },
    focus: function(event, ui) {
      event.preventDefault();
    }
  });

  $(".selected").on("click", ".btn-close", function() {
    var id = $(this).parent().data("id");
    $(this).parent().remove();
    var sel = $("#city").val().split(",");
    sel = sel.splice(sel.indexOf(id), 1);
    $("#city").val(sel.join(","));
  });
});