jquery autocomplete not showing result

Question

I try to make autocomplete with jquery filter by id category, when I type the result not showing, like this picture :

When I click tab network I've got the data like this picture :

This is my code javascript :

<script type="text/javascript">
$(function() {
  $(".keyword").autocomplete({
    source: function(request, response) {
      $.ajax({
          url: "search/autocomplete",
          type: "GET",
          dataType: "json",
          data: {'id':1},
          success: function(data) {
              response($.map(data, function(item) {
                return {
                  label: item.name,
                  value: item.id
              };
              }));
          }
      });
    },
    select:function(event,ui) {
      $(".keyword").val(ui.item.label);
      return false;
    },
    minLength: 2,
  }).bind('focus', function () {
    $('.ui-autocomplete').css('z-index','9999').css('overflow-y','scroll').css('max-height','300px');
    // $('.ui-autocomplete').css('background','#09121a').css('color','#fff');
    // $('.ui-menu .ui-menu-item-wrapper').css('padding','11px 1em 3px 1.4em !important');
    // $(this).autocomplete("search");
    // var btncategory = $('.btn-category').width();
    // var left = '-'+btncategory+'px';
  });
});
</script>

If I type "a" - I don't see anything, but when I delete "a" - I see all three. So it's look like the jQuery doesn't know that it should look for a value in object.name.

Answer 1

As Tan Duong said, your response only contains the attribute called value . It is not able to find name and id , hence your results are showing blank data.

Change your success function to this:

success: function(data) {
          response($.map(data, function(item) {
            return {
              label: item.value,
              value: item.value
          };
          }));
      }