Items are not rendering in jquery ui autocomplete.

Items are not rendering in jquery ui autocomplete.

Hello,

I am new to JQuery UI. I am trying to include the JQuery UI autocomplete field in my app. This field hits a remote data source. The markup for my autocomplete field looks like this:

  2. <input id="myAutocomplete" type="search" class="form-control input-sm ui-autocomplete-input" autocomplete="off" spellcheck="false" placeholder="">

I am initializing this auto complete field via the following JavaScript:

  2. $('#myAutocomplete').autocomplete({
  3.       minLength: 3,
  4.       source: '/api/autosuggestions',
  5.       select: function(e, ui) {
  6.         alert(ui);
  7.       }
  8.     });

When I begin typing, I am getting suggestions back from my server. I can see them in Fiddler. My suggestions are JSON, which look like this:

  2. [{"Id":"1","DisplayName":"Bill"},{"Id":"2","DisplayName":"John"},{"Id":"3","DisplayName":"Eric"},{"Id":"4","DisplayName":"Rachel"},{"Id":"5","DisplayName":"Jack"}]

The autocomplete opens in the UI. However, the only thing I see are 5 empty rows beneath my text field. If I right-click on one of the rows in Chrome and select "Inspect Element", I see the following towards the end of the HTML:

  2. <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: block; top: 1615px; left: 984.75px; width: 229px;"><li class="ui-widget-content ui-menu-divider"></li><li class="ui-widget-content ui-menu-divider"></li><li class="ui-widget-content ui-menu-divider"></li><li class="ui-widget-content ui-menu-divider"></li><li class="ui-widget-content ui-menu-divider"></li></ul>

How do I get the "DisplayName" values to show in the list? As the code above shows, each of the li elements are empty. There's no text.