Click here to Skip to main content
15,038,345 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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
{
    /// <summary>
    /// Summary description for ProductHandler
    /// </summary>
    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;
        }
        }
    }
}
Posted
Updated 29-May-19 7:40am
Comments
Patrice T 25-May-19 6:35am
   
define "the code didn't work well"
Youhana 25-May-19 7:02am
   
i run code throw ashx handler it waork well
http://localhost:60218/ProductHandler.ashx?term=م
Results
كاش مزيكا","مقلم","كاش مزيكا","كاش مزيكا","بوما","مكواه شعر","مكواه شعر","مكت","مكت","مكواه شعر","مكواه شعر"]
Youhana 25-May-19 8:02am
   
i tried separate page it work fine and gave me the exact result i think there are error in html page but in vain i cant find it

1 solution

You are trying to call the jQuery function before the jQuery script has been loaded. If you use your browser's developer tools, you will see a script error in the console informing you that the function $ is not defined.

Move your inline <script> block to the bottom of the page, between the bootstrap.js script and the closing </body> tag.
HTML
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>
    $(function(){
        $("#btnCart").click(function myfunction() {
            window.location.href = "/MyCart.aspx";
        });
        $('#TxtSrc').autocomplete({ 
            source: 'ProductHandler.ashx' 
            // NB: This assumes that the handler is in the same directory as the current page.
        });
    });
    </script>
</body>

If it still doesn't work, use your browser's developer tools to look for Javascript errors, and to monitor the network requests.

Also note:

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:
  • $( handler )
  • $( document ).ready( handler )
  • $( "document" ).ready( handler )
  • $( "img" ).ready( handler )
  • $().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900