bind data

How to Bind Data into table based on Autocomplete SearchBox .?

Solution -: @model IEnumerable<NewMedProduct.Models.Product>

<br /><br />

<div class=”container”>

    <b>Search By : </b>

    <select id=”SearchBy”>

        <option value=”Name”>Name</option>

        <option value=”ID”>ID</option>

    </select><br /><br />

    @Html.TextBox(“Search”)

    <input type=”hidden” id=”hfCustomer” name=”CustomerId” />

    @Html.AntiForgeryToken()

    <input type=”submit” id=”searchBtn” value=”Search” /><br /><br />

    <table class=”table table-bordered”>

        <thead>

            <tr>

                <th>ID</th>

                <th>Name</th>

                <th>Description</th>

                <th>Unit</th>

                <th>Quintity</th>

                <th>MRP</th>

            </tr>

        </thead>

        <tbody id=”DataSearching”></tbody>

    </table>

</div>

<script src=”~/Scripts/jquery-1.10.2.min.js”></script>

<link rel=”stylesheet” href=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css”>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>

<script src=”~/Scripts/autocomplete-0.3.0.min.js”></script>

<script type=”text/javascript”>

    $(“#searchBtn”).click(function () {

        var searchBy = $(“#SearchBy”).val();

        var searchValue = $(“#Search”).val();

        $.post(‘@Url.Action(“GetSearchingData”, “Default”)’, { searchBy: searchBy, searchValue: searchValue },

         function (result) {

             $(‘#DataSearching’).html(”);

             if (result.length == 0) {

                 SetData.append(‘<tr style=”color:red”><td colspan=”3″>No Match Data</td></tr>’);

             }

             else {

                 $.each(result, function (index, value) {

                     var Data = ‘<tr>’ +

                     ‘<td>’ + value.ID + ‘</td>’ +

                     ‘<td>’ + value.Name + ‘</td>’ +

                     ‘<td>’ + value.Description + ‘</td>’ +

                     ‘<td>’ + value.Unit + ‘</td>’ +

                     ‘<td>’ + value.Quintity + ‘</td>’ +

                     ‘<td>’ + parseFloat(value.MRP).toFixed(2) + ‘</td>’ +

                     ‘</tr>’;

                     $(‘#DataSearching’).append(Data);

                 });

             }

         });

    });

    $(“#Search”).autocomplete({

        source: function (request, response) {

            $.ajax({

                url: “http://localhost:62664/Default/GetSearchingData”,

                type: “POST”,

                dataType: “json”,

                data: “{searchValue: ‘” + request.term + “‘ }”,

                contentType: “application/json; charset=utf-8”,

                success: function (data) {

                    debugger;

                    response($.map(data, function (item) {

                        return item.Name;

                    }))

                },

            })

        },

        select: function (event, ui) {

            $(‘#Search’).val(ui.item.label);

            $(“#searchBtn”).click();

            return false;

        }

    });

</script>

Leave a comment

Your email address will not be published. Required fields are marked *