AutoComplete with JSON data using jQuery

App Development
1

From nsilva (AutoComplete with JSON data using jQuery - Stack Overflow)

I’m trying add an autocomplete input textbox which will retrieve the data using Pipedrive API.

The JSON response I get from Pipedrive is as follows:-

{
  "success": true,
  "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"
  }],
  "additional_data": {
    "pagination": {
      "start": 0,
      "limit": 5,
      "more_items_in_collection": true,
      "next_start": 5
    }
  }
}

I basically need to return the title and id of the value they select.

At the moment my jQuery code is as follows:-

$('#search-deal').autocomplete({
    source: function (request, response) {
        $.getJSON("https://api.pipedrive.com/v1/searchResults/field?term=deal&field_type=dealField&field_key=title&start=0&api_token=<my_token>", function (data) {
            response($.map(data.title, function (value, key) {
                return {
                    label: value,
                    value: key
                };
            }));
        });
    },
    minLength: 2,
    delay: 100
});
2

Reply from Nisarg Shah:

You could use Array.map to map the data to label, value & desc properties.

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

The property you set against value during data.map is used to set the input’s value.

Then using the Array.filter you could filter those values as per the input:

var key = request.term;

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

$('#search-deal').autocomplete({
  source: function(request, response) {
    var data = {
      "success": true,
      "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"
      }],
      "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.title,
        value: i.id + ' - ' + i.title,
        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
});



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