Demo - AutoComplete Async Loading

by Dhanck

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    AutoComplete Async Loading
  </h1>

  <p>
    The AutoComplete below populates the drop-down list
    asynchronously using the <b>itemsSourceFunction</b>
    property.</p>
  <p>
    Try typing "ch" or "chi" and waiting a second to see
    the drop-down.</p> 
    
  <label for="theAutoComplete">AutoComplete:</label>
  <div id="theAutoComplete"></div>
  <p>
    Selected product: <b id="msg">None</b>
  </p>
  <p>
    This feature is especially useful when the number
    of items is large (thousands or millions of items)
    and the data is stored in a server database capable
    of fast searches.</p>
</div>

CSS

.wj-dropdown {
  margin-bottom: 18px;
}

body {
  margin-bottom: 24px;
}

JavaScript

onload = function() {

  // AutoComplete with async search using OData source
	var theAutoComplete= new wijmo.input.AutoComplete('#theAutoComplete', {
  	placeholder: 'Product Name',
  	displayMemberPath: 'ProductName',
  	itemsSourceFunction: function(query, max, callback) {
    	if (!query) {
      	callback(null);
        return;
      }
    	var url = 'https://www.matchesfashion.com/womens/shop';
    	wijmo.httpRequest(url, {
      	data: {
        	$format: 'json',
          $select: 'ID,title',
          $filter: 'indexof(title, \'' + query + '\') gt -1'
        },
      	success: function(xhr) {
        	var response = JSON.parse(xhr.response);
          var arr = response.d ? response.d.results : response.value;
  				callback(response.value);
        }
			});
		},
		selectedIndexChanged: function() {
  		var product = theAutoComplete.selectedItem;
      document.getElementById('msg').textContent = product
      	? wijmo.format('{title} (ID: {ID})', product)
        : 'None';
		}
  });
}