JSFiddle - React, Tailwind, and code Playground

by bryiantan

HTML

<input id="txt-search">

JavaScript

var my_data = {
  "status": "ok",
  "count": 4,
  "data": [
    {
      "nickname": "Deadly",
      "id": 501689800
    },
    {
      "nickname": "Deadly00",
      "id": 517095041
    },
    {
      "nickname": "Deadly001",
      "id": 504471830
    },
    {
      "nickname": "DeadLy01",
      "id": 500877077
    }
  ]
};
 function handleAutocomplete(term) {
        // use 'term' for custom filtering etc.
        var options = $.grep(my_data.data, function(e) {
           // return e.nickname.startsWith(term);
           return e.nickname.indexOf(term) >=0;
        });
        return options;
}

    jQuery("#txt-search").autocomplete({
        minLength: 2,
        delay: 500,
        source: function (request, response) {
            jQuery.ajax({
            		type: 'POST',
                url: '/echo/json/',
                dataType: "json",
                data: {
                    //searchString: request.term
                     searchString: request.term,
                },
                success: function (data) {
                    alert(data);
                }
            });
        },
        focus: function (event, ui) {
            return false;
        },
        select: function (event, ui) {
            jQuery("#table-detail tbody").append("<tr>" +
                "<td class='text-center'>" + (jQuery("#table-detail tbody tr").length + 1) + "</td>" +
                "<td><input type='hidden' name='HangHoaID' value='" + ui.item.HangHoaID + "' >" + ui.item.MaHang + "</td>" +
                "<td>" + ui.item.TenHang + "</td>" +
                "<td class='text-center'>" + ui.item.DonViTinh + "</td>" +
                "<td><input type='text' name='GiaNhap' value='" + ui.item.GiaNhap + "' class='form-control text-right'></td>" +
                "<td><input type='number' name='SoLuong' value='" + ui.item.SoLuong + "' class='form-control text-right' ></td>" +
                "<td class='money TongTien'>" + jQuery.number(ui.item.GiaNhap, 0, '.',...