Monday, June 25, 2018

Real Time Filtering by Javascript


Html:

Search Div:
<div class="col-xs-6">
                                        <div class="inputbox">
                                            <input type="text" id="myInput" placeholder="Search By Product Name .....">
                                            <input type="submit">
                                        </div>
                                    </div>


Content:
  @foreach (var item in Model)
                                {
                                    XDbContext db = new XDbContext();

                                    var Product = db.Products.Where(e => e.productID == item.ProductID)

                                                                  .FirstOrDefault();

                                    <div class="row ord platform">
                                        <div class="col-sm-2">
                                            <div class="order_img">
                                                <img src="@imageUrl@Product.ProductImage">
                                            </div>
                                        </div>

                                        <div class="col-sm-10">
                                            <div class="order_text search-me">
                                                <p><span>Product Name:</span><a href="@Url.Action("Details","Product",new { id = Product.productID, title = getEncodedTitle(Product.ProductTitle) })">@Product.ProductTitle</a> </p>
                                                <p><span>Date: @item.LastUpdated.GetValueOrDefault().ToString("dd MMM, yyyy")</span></p>

                                                <h4>AED @Product.SellingPrice</h4>
                                            </div>




                                        </div>

                                    </div>

                                }

Script: 

  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $('.platform').hide();

      // Search and show
    $('.platform .search-me:contains("' + value + '")').closest('.platform').show();
  });

No comments:

Post a Comment