JSFiddle - React, Tailwind, and code Playground

by salt

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-4-autocomplete/dist/bootstrap-4-autocomplete.min.js"></script>
<html>

  <body>
    <div class="container">
      <div id="parent" class="form-group">
        <label for="myAutocomplete">Bootstrap 4 Autocomplete</label>
        <input type="text" id="myAutocomplete" class="form-control" />
      </div>
      <div id="output"></div>
    </div>
  </body>

</html>

JavaScript

var src = {
  "Bootstrap 4 Autocomplete example": 1,
  "Best example in the world": 2,
  "Bootstrap 4 Autocomplete is very nice": 3,
  "It contains neatly arranged example items": 4,
  "With many autocomplete values": 5,
  "And it uses default Bootstrap 4 components": 6,
  "You can use this example to test": 7,
}

function onSelectItem(item, element) {
  $('#output').html(
    'Element <b>' + $(element).attr('id') + '</b> was selected<br/>' +
    '<b>Value:</b> ' + item.value + ' - <b>Label:</b> ' + item.label
  );
}

$('#myAutocomplete').autocomplete({
  source: function(){
     "https://servis.srcpax.com/[email protected]&password=12345&keyword=%C3%B6n+amortis%C3%B6r"
  },
  onSelectItem: onSelectItem,
  highlightClass: 'text-danger',
  treshold: 2,
});