Asp.net mvc a grid automatically gets updated base on typing value on a textbox

Question

I want to create a textbox to search for values inside a grid. When I type a text on the textbox, the grid will be updated automatically showing values corresponding to what I have typed without any need for pressing button or enter. How can I do that? This is my three textboxes in Index.cshtml file:

<div class="col-md-3">

    <div class="efield awe-il">@Html.Awe().TextBox("txtVINnumber").Placeholder("Find VIN number").CssClass("searchtxt") </div>
</div>
<div class="col-md-3">
    <div class="efield awe-il">@Html.Awe().TextBox("txtEngineVINnumber").Placeholder("Find Engine VIN number").CssClass("searchtxt") </div>
</div>
<div class="col-md-3">
    <div class="efield awe-il">@Html.Awe().TextBox("txtGoukinumber").Placeholder("Find Gouki number").CssClass("searchtxt") </div>

</div>

And this is my action method:

 public ActionResult GetItems(GridParams g, int? atdid, bool? showDeleted, string vinNumber, string engineVinNumber, string goukiNumber)
        {
            vinNumber = (vinNumber ?? "").ToLower();
            engineVinNumber = (engineVinNumber ?? "").ToLower();
            goukiNumber = (goukiNumber ?? "").ToLower();

            IQueryable<VehicleRecord> query = _context.VehicleRecords.Where(o => o.VinNumber.ToLower().Contains(vinNumber) && o.EngineVin.ToLower().Contains(engineVinNumber) && o.GoukiNumber.ToLower().Contains(goukiNumber)).AsQueryable().Include(p => p.Spot).Include(l => l.VehicleLocation);
            int id = Convert.ToInt32(g.Key);
            if (showDeleted.HasValue)
            {
                query = query.Where(p => p.IsDeleted == showDeleted.Value);
            }
            if (!vinNumber.IsEmpty())
            {
                query = query.Where(o => o.VinNumber.Equals(vinNumber));
            }

            return Json(new GridModelBuilder<VehicleRecord>(query, g)
            {
                Key = "Id",// needed for Entity Framework | nesting | tree

                Map = o => new
                {
                    o.Id,
                    o.VinNumber,
                    o.EngineVin,
                    o.GoukiNumber,
                    Position = string.Format("{0} - spot # {1}", o.VehicleLocation.Name, o.Spot.SpotNumber),
                    o.IsDeleted

                }
                ,
                GetItem =
                    () => query.FirstOrDefault(x => x.Id == id)
            }
                .Build());


        }
    }

Edit: This is what i have done so far

Answer 1

I think you can achieve this with ajax and JQuery. Steps

1. Register the textboxes with changed events. For this step refer JQuery code to get values changed in text box. In current example I have written alert for change in values.

2. On change event collect the values from textbox and sent to across to your controller method the same method your are using on click button.

Here you need to rplace the alert with ajax call.

For the step one just include id like textbox1, textbox2 and textbox 3 and hook up with change event

$('#elementId').change(function(){
   alert("changed");
   //Call here ajax code to call the controller method which will reload the grid 
});

previousVal = "";
function InputChangeListener()
{
  if($('#elementId').val()
     != previousVal)
  {
   previousVal  = $('#elementId').val();
   $('#elementId').change();    
  }
}

setInterval(InputChangeListener, 500);

$('#elementId').val(3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type="text" id="elementId" />

.

Now Instead of alert put ajax call over there

$.ajax({
        type: "POST",//Your type of call get or Post
        url: "http: ~/GetItems", //URL to application
        content: "application/json; charset=utf-8",
        data: dataRequest,//All the parameters
        success: function(d) {
            //Update your grid
        },
        error: function (xhr, textStatus, errorThrown) {
            // TODO: Show error
        }
    });