I have search Box In E_Commerce Website I tried to make it auto Complete with suggestion but in vain the code didn't work well with me nee your help please
What I have tried:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Home</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Rakkas&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Amiri&display=swap" rel="stylesheet"/>
<link href="css/Custom-Cs.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
$(document).ready(function myfunction() {
$("#btnCart").click(function myfunction() {
window.location.href = "/MyCart.aspx";
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#TxtSrc').autocomplete(
{ source: 'ProductHandler.ashx' });
});
</script>
</head>
<body>
<form runat="server">
<div class="row text-center" style="padding-top:60px;padding-bottom:20px">
<div class="col-lg-4" ></div>
<div class="col-lg-4" >
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">بحث!</button>
</span>
<input id="TxtSrc" type="text" class="form-control" runat="server" autocomplete="on" />
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<div class="col-lg-4" ></div>
</form>
<!--- Footer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
this Ashx Handler
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
namespace Mypro
{
public class ProductHandler : IHttpHandler
{
Business_Layer.BS_Layer BSS = new Business_Layer.BS_Layer();
public void ProcessRequest(HttpContext context)
{
string Term = context.Request["term"] ?? "";
List< string> listProduct = new List<string> ();
BusinessObject_Layer.BO_Layer objbo = new BusinessObject_Layer.BO_Layer
{
ProName=Term
};
DataTable dt_Products = BSS.SearchBoxProduct(objbo);
listProduct = dt_Products.AsEnumerable().Select(r => r.Field<string>("PName")) .ToList();
JavaScriptSerializer js = new JavaScriptSerializer(); context.Response.Write(js.Serialize(listProduct));
}
public bool IsReusable
{
get
{
return false;
}
and this StoreProcedure
alter proc SearchBoxitem
@PName nvarchar(100)
as
select PName from tblProducts where PName like '%'+ @PName +'%'
and Business Layer Code
public DataTable SearchBoxProduct(BusinessObject_Layer.BO_Layer objbo)
{
SqlParameter[] param = new SqlParameter[1];
param[0] = new SqlParameter("@PName", SqlDbType.NVarChar,100)
{
Value = objbo.ProName
};
Dal.Open();
DataTable dt = new DataTable();
dt = Dal.SelectData("SearchBoxitem", param);
return dt;
}
}
}
}