CODEWITHSUNDEEP
jqueryautocomplete
Ali Rasheed
Ali Rasheed

Reputation: 2817

Autocomplete doesn't show the results in list

I have managed to fetch results from database and the given var products is the result I saw whilst inspecting element. The only issue is the list that should contain the result isn't visible.

I also tried to inspect element the list so this is I got

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; top: 136px; left: 865px; width: 402px;">
    <li class="ui-widget-content ui-menu-divider"></li>
</ul>

A blank list. This is the first time trying to autocomplete. Please help if can.

$(function() {
  {
    var products = [{
      "product_code": "ABC1233",
      "product_id": 1,
      "product_name": "National Stove Testing"
    }];
    $("#find_product").autocomplete({
      source: products,
      select: function(even, ui) {
        $("#id").val(ui.item.id); //ignore this
        $("#name").val(ui.item.value); //ignore this
        $("#type").val(ui.item.type); //ignore this
      }
    });
  }
});
<div class="ui-widget">
  <label for="find_product">Find Product: </label>
  <input id="find_product">
</div>

Upvotes: 0

Views: 599

Answers (1)

Yogen Darji
Yogen Darji

Reputation: 3300

Fiddle - http://jsfiddle.net/darjiyogen/kq7pL4kh/1/

  $(document).ready(function () {
var products = [{
  "value": "aBCD",
  "id": 1,
  "label": "National Stove Testing"
},{
  "value": "EF",
  "id": 2,
  "label": "WEWE Stove Testing"
}];

$("#find_product").autocomplete({
    source: products,
      minLength: 1
});

});
<div class="ui-widget">
  <label for="find_product">Find Product: </label>
  <input id="find_product">
</div>

Upvotes: 1

Related Questions