JSFiddle - React, Tailwind, and code Playground

by mpsingh2003

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<input type="text" id="search-deal" />
<button id="create" type="submit" class="btn btn-primary">Créer une affaire</button>
<button id="import" type="submit" style="visibility:hidden" class="btn btn-primary">Importer</button>

JavaScript

$('#search-deal').autocomplete({
  source: function(request, response) {
    var data =[{
        "id": 1671,
        "title": "Queens Park Tyres deal"
      }, {
        "id": 1672,
        "title": "Wildman Craft Lager deal"
      }, {
        "id": 1673,
        "title": "General Store deal"
      }, {
        "id": 1674,
        "title": "Deluxe Off Licence deal"
      }, {
        "id": 1675,
        "title": "Ahmed Halal Bazaar deal"
      }];
    
    var datamap = data.map(function(i) {
      return {
        label: i.id + ' - ' + i.title,
        value: i.id + ' - ' + i.title,
        desc: i.title
      }
    });
    
    var key = request.term;
    
    datamap = datamap.filter(function(i) {
      if(i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0){
        document.getElementById("create").style.visibility = 'hidden';
        document.getElementById("import").style.visibility = 'visible';
        return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0;
          };
    });
		console.log(datamap)
    response(datamap);
  },
  minLength: 1,
  delay: 100,
  select: function( event, ui ) {
  
  }
});