Problem in autocomplete suggession

Question

1.00/5 (1 vote)

See more:

, +

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" />

<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" />

<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" />




<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>
</div>
</div>
<div class="col-lg-4" ></div>
</form>


<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 25-May-19 0:18am

Youhana

Updated 29-May-19 7:40am

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2019-05-29T07:41:00

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:

.ready() | jQuery API Documentation[^]:

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.