Autocomplete to MS graph People and authToken

[Ryan]

Need your help Looking for a jQuery example of how to pass authToken and bind autocomplete to https://graph.microsoft.com/v1.0/me/people/?$search=(?)

[Ivan Danchev]

Hello Ryan,

We don't have an example of binding to MS Graph People, but let me provide some details on how the AutoComplete and its dataSource work in a remote binding scenario.

The AutoComplete's dataSource sends an AJAX request to the end point to get data. Since this is a standard AJAX request you can use the request's settings: https://api.jquery.com/jquery.ajax/ to pass an Authorization token. This can be done with the beforeSend callback, e.g.

<input id="products" />

<script>
  $(document).ready(function() {
    var dataSource = new kendo.data.DataSource({
      transport: {
        read:  {
          url: "https://my-end-point",
          dataType: "json",
          beforeSend: function(xhr) {
            xhr.setRequestHeader('Authorization', 'bearer ' + sessionStorage.accessToken);
          } 
        }
      }
    });

    $("#products").kendoAutoComplete({
      dataTextField: "ProductName",
      dataSource: dataSource,
    });
  });
</script>

As for the data itself, the AutoComplete expects JSON, so here's an exemplary response that contains the data of 4 items:

[
  {
    "ProductID": 1,
    "ProductName": "Chai",
    "UnitPrice": 18,
    "UnitsInStock": 39,
    "Discontinued": false
  },
  {
    "ProductID": 2,
    "ProductName": "Chang",
    "UnitPrice": 19,
    "UnitsInStock": 17,
    "Discontinued": false
  },
  {
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "UnitPrice": 10,
    "UnitsInStock": 13,
    "Discontinued": false
  },
  {
    "ProductID": 4,
    "ProductName": "Chef Anton's Cajun Seasoning",
    "UnitPrice": 22,
    "UnitsInStock": 53,
    "Discontinued": false
  }
]

Regards,
Ivan Danchev
Progress Telerik