<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" />
<script>
    $(document).ready(function(){
$('#search-deal').autocomplete({
 source: function(request, response) {
var data = {
  "success": true,
  "data": "http://easyautocomplete.com/resources/countries.json",
  "additional_data": {
    "pagination": {
      "start": 0,
      "limit": 5,
      "more_items_in_collection": true,
      "next_start": 5
    }
  }
};

var datamap = data.data.map(function(i) {
  return {
    label: i.id + ' - ' + i.name,
    value: i.id + ' - ' + i.n,
    desc: i.title
  }
});

var key = request.term;

datamap = datamap.filter(function(i) {
  return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0;
});

response(datamap);
},
minLength: 1,
delay: 100
});
});
</script>