Autocomplete textbox using jquery in asp net

Рет қаралды 87,654

Күн бұрын

Link for all dot net and sql server video tutorial playlists
www.youtube.co...
Link for slides, code samples and text version of the video
csharp-video-tu...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our KZbin channel. Hope you can help.
/ @aarvikitchen5572
In this video we will discuss, how to implement autocomplete textbox using jquery and asp.net. The suggestions should come from the database table.
Stored procedure to retrieve employee name suggestions
Create proc spGetStudentNames
@term nvarchar(50)
as
Begin
Select Name from tblStudents where Name like @term + '%'
End
StudentHandler.ashx code
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.Script.Serialization;
namespace Demo
{
public class StudentHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string term = context.Request["term"] ?? "";
List<string> listStudentNames = new List<string>();
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("spGetStudentNames", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter parameter = new SqlParameter()
{
ParameterName = "@term",
Value = term
};
cmd.Parameters.Add(parameter);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
listStudentNames.Add(rdr["Name"].ToString());
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.Write(js.Serialize(listStudentNames));
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Download jQuery UI from jqueryui.com. Copy and paste the following files in your project.
a) jquery-ui.js
b) jquery-ui.css
c) images
Add a WebForm to the ASP.NET project. Copy and paste the following HTML and jQuery code.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs"
Inherits="Demo.WebForm1" %>
<!DOCTYPE html>
<html xmlns="www.w3.org/1999...">
<head runat="server">
<title></title>
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('#txtName').autocomplete({
source: 'StudentHandler.ashx'
});
});
</script>
</head>
<body style="font-family: Arial">
<form id="form1" runat="server">
Student Name :
<asp:TextBox ID="txtName" runat="server">
</asp:TextBox>
</form>
</body>
</html>

Пікірлер: 70

@sandeepvasuli 8 жыл бұрын

best one sir.. very well worked for me.. inspired from your work.. thinking to create our own channel to indian developes

@Csharp-video-tutorialsBlogspot 8 жыл бұрын

+sandeep maurya Thank you for the valuable feedback. Free Dot Net & SQL Server training videos for aspiring web developers kzbin.infoplaylists?view=1&sort=dd Download our high quality videos and slides for offline viewing www.pragimtech.com/Order.aspx Code Samples, Text Version of the videos & Slides on my blog csharp-video-tutorials.blogspot.com Tips to use our channel kzbin.info/www/bejne/r2ibYYCtnb5qZtU To receive emails, when new videos are uploaded, please subscribe to our channel using the link below kzbin.info If you like our videos, please click the THUMBS UP button below the video Thanks for sharing the link with your friends who you think would also benefit from them Sharing is fun Thanks Venkat

@Csharp-video-tutorialsBlogspot 9 жыл бұрын

Autocomplete textbox using jquery in asp.net

9 жыл бұрын

Gran aporte amigo :)

@haiderjaafer8164 9 жыл бұрын

kudvenkat's very beautiful work from you ... so can merge another column with the name in list so when i type letter M it show all names with M merged with its totalmarks...i need to do this idea ...thanks alot

@Csharp-video-tutorialsBlogspot 9 жыл бұрын

Haider Jaafer Modify the stored procedure. Alter proc spGetStudentNames @term nvarchar(50) as Begin Select Name + ' - ' + LTRIM(TotalMarks) as Name from tblStudents where Name like @term+ '%' End

@grantwilliams9838 6 жыл бұрын

Really appreciate all the tutorials you've made. My wife believes I'm your greatest fan in Australia. This tutorial really helped out with something at work.

@Russellye5man1 6 жыл бұрын

Thank you - worked first time. For those having issues when using PlaceHolders, you need to append the reference of the ID of the textbox accordingly. My txtBox id = "txtSearchName", my placeholder ID is "ContentPlaceHolder1", therefore the JS call is: "#ContentPlaceHolder1_txtSearchName").autocomplete - Cheers!

@vutEwa 3 жыл бұрын

why not use ClientID of the control?

@Rahim0472 8 жыл бұрын

Really Amazing Work by Venkat....Never seen such Tutorials on KZbin

@wojtekk1109 5 жыл бұрын

Hi, Your code works excellent in web form without master page, but when i try to implement it to web form with master page, jquery doesn't work. Do You know why?

@kunaldedhia5502 9 жыл бұрын

Thank you for all your generosity by sharing knowledge across the world. Would we be also getting few videos on Jquery Plugins...? It would be awesome to have them as well.

@bawagrafix 4 жыл бұрын

best one and awesome, looking for this particular tutorial. Thanks for sharing

@BigyetiTechnologies 8 жыл бұрын

Nope, this is not working for me. With the exception of the ADO using my database with different tables and column names, my code is identical. When I load the handler in the browser and add a term, it works fine. Just not on the textbox.

@vutEwa 3 жыл бұрын

I believe that might be because the javascript he shows doesn't associate the value with a query string name. He showed javascript with source to the handler but it is missing the rest. So StudentHandler.ashx should read StudentHandler.ashx?term=

@jesussheepakash9289 3 жыл бұрын

Thank You Sir , God Jesus Christ Bless you and your family

@amland3878 7 жыл бұрын

The ashx is basically searching for the "term" in the query string and passing it as the input variable to the Stored Proc. The Jquery autocomplete function is taking the textbox text and sourcing it to the ashx handler which will search for the "term" variable in the query string. But where exactly are we assigning the textbox text into "term" variable ? the query string might have multiple variable passed, so how the handler function is identifying that as "term" ? or is it some default/automatic setup?

@KochharAmandeep 6 жыл бұрын

Exactly what i was searching for in the comments! Please guide me if you found an answer to this

@wissamfawzy6543 Күн бұрын

Great work

@KoenBoyful 6 жыл бұрын

I will try to explain this the best way I can. I am making a domain checker and that works for me, now I have a function that shows some of the domains I have in my var named "domains" once I type in a DOT 'because all the variables domains begin with a dot' all the domains will appear but when I write some text before I put the DOT it will not appear anymore. What do I have to change to let it show the text before the DOT? Here is the code I use, and some picture how it looks right now.

@ahmedinooo 8 жыл бұрын

Excellent tutorial, thanks alot

@ankitagarwal2035 6 жыл бұрын

Thanks it worked for me with slight change in code by adding ClientID as below $("#").autocomplete({

@shebinKH 5 жыл бұрын

ANKIT AGARWAL thank you, bro !!

@vutEwa 3 жыл бұрын

thank you for sharing this. One question for you. Your javascript shows the source of the handler but doesn't specify the query string to be passed. How did that work without the javascript knowing what name the value being passed corresponds to?

@vamshikrishnabasani 8 жыл бұрын

Whatever the Text that is typed in the text box is not being passed as an argument to the generic handler....I have implemented the same code that is shown in the video.please help.

@rajkumarchavan6817 7 жыл бұрын

Thanks a lot sir, it is very to implement search in asp.net after watching this vd.

@danyesc7620 6 жыл бұрын

Thanks a lot, bro..! Very useful..!

@DataBeach 6 жыл бұрын

Excellent tutorial. Thanks for posting. I tried to implement for a Content Page but the final step didn't work. everything was ok up to testing the Handler. What could be the issue?

@ganeshk500 7 жыл бұрын

Hi Venkat, really helpful.... so can the 1st record get select in the auto completed list once hit tab button

@aamazingideasnational 9 жыл бұрын

Hi Sir, Hats off to you!! Please post some videos on ANGULAR JS as well. Thanks,

@aliabdouislem 8 жыл бұрын

great work, help me please, how to get the Id when I click on the Name on the TextBox?

@shivanandareddy2854 7 жыл бұрын

Hi sir Your videos helped me a lot. can you provide me link for similar like this in mvc-5 i have been searching throughout internet for autocomplete search textbox for mvc but i could not find it

@KikeCerati 4 жыл бұрын

Hi, Have you an example with DropDownList control? Thanks a lot

@gabrieleduardozunigacastil1952 7 жыл бұрын

i don't know why when im running the .ashx file works Great!, But... when im running the website while typing on the Textbox doen't changa anything... can you help me Master #Kudvenkat ???

@benjaminjaravacaly599 9 жыл бұрын

Sorry,,, Kudvenkat Hello, I'm trying to implement auto video but do not understand why it does not work Textbox from the URL works well but since the form does nothing, I appreciate the help, I think jquery libraries are not worked. I am using a Where to put the jquery? Thanks if you can give me a hand ..

6 жыл бұрын

Sir how show student pass or fail real-time by jquery

@GokulVijayPVG 7 жыл бұрын

Some of them had commented that dropdown is value is not displaying. Its Bcoz of Javascript Version. You use the Following Link instead of Downloading the file.

@benjaminjaravacaly599 9 жыл бұрын

Hola Kudvenkat, estoy tratando de implementar el autocompletar del vídeo pero no logro entender por qué no funciona el Textbox, desde la Url funciona bien pero desde al formulario no hace nada, te agradezco la ayuda, creo que las librerías de jquery no están funcionado. estoy usando un ¿donde coloco el jquery? gracias si me puedes dar una mano..

@sanjeevdwivedi9538 9 жыл бұрын

Thank you sir for this videos. its working good but i have a problem in that sir. the auto-complete contain above 1 Lakh record to show its working very slow to show record, so how could increase the performance in that. can you please tell us something in that. thank you.

@erickosorio3019 8 жыл бұрын

Is great, thanks bro!!

@muhammadmateen4887 8 жыл бұрын

thank alot sir, i have 67000 records and generic handler is taking too much time is there a way to make it faster?

@vutEwa 3 жыл бұрын

indexing should help. 67000 records is peanuts... try MILLIONS of records

@JediPhantom 9 жыл бұрын

is it possible to use a drop down list instead of a textbox, that filters the list as the user types a name

@dinoeld3800 5 жыл бұрын

Thank you very much :D

@NSNegi-mt7rx 5 жыл бұрын

respected venkat sir i shall be highly obliged to you if you kindly guide me on the following issue i wrote your autocomplete text box using jquery by event handler it is working fine as expected in a page which does not have the master page in the background but when i am pasting the same in content page of a master page it is not giving any result of dropdown autocomplete list i shall be highly if you please give me the solution with warm regards

@softaimsinfotech5056 7 жыл бұрын

hi venkat sir my control id change in run time automatic so how to slow this problem?

@owaishassan4812 7 жыл бұрын

i am getting No 'Access-Control-Allow-Origin' header is present on the requested resource error when i put some text in textbox error appears in console my Handler is in different project having different port

@gallamex9316 8 жыл бұрын

Excelent video

@mreggxi3644 8 жыл бұрын

can you guide me anythings about multi word autocomplete textbox ?

@shravanipadigalla7205 6 жыл бұрын

Hi sir,I want to clear cache for autocomplete pls help me how to clear that

@akashgupta1508 6 жыл бұрын

jquery not appending input text as querystring thats why its showing all value in the table please help

@ajewahar 5 жыл бұрын

Hi . autocomplete is not working with master page. Any fix ?

@stkcansu3311 7 жыл бұрын

thank u so much...:)

@akashgupta1508 6 жыл бұрын

not working showing all values of in the column of the table

@pradeepkumar-ez3vo 7 жыл бұрын

how to autocomplete a textbox when its present in .ascx page?

@gallamex9316 8 жыл бұрын

hola una pregunta cuando corro el proceso en el textbox no me muestra la lista pero en el ashx si lo lo muestra que puede estar mal?? $(document).ready(function () { $("#txtPrueba").autocomplete({ source: 'Handler.ashx' }); });

@angelgutierrez3080 4 жыл бұрын

Tengo el mismo problema, lo lograstes solucionar?

@shambeldessale6464 7 жыл бұрын

Hi! I am tried this with a masterpage and entity framework but is not working can someone help me how?

@KochharAmandeep 6 жыл бұрын

when you use a master page every control's id is changed. Use a property called ClientIDMode = "Static" for keeping the id same as you named

@drusttaib607 5 жыл бұрын

solution: for those who has (jQuery) error. add the jquery.js file to your project and link it to your project. the jquery.js is located in external/jquery.js

@babyglimpse247 8 жыл бұрын

It didn't worked from me..when i type a letter in textbox it show all values of database..it does not show only specific values..I did all things same as video.

@intanational101 8 жыл бұрын

+Archana Sagare I am having the same problem; have you figured it out?

@michaelg8018 8 жыл бұрын

I had the same problem,you must write the string variable 'term' just like in the video, not only in the procedure but also in the handler If you decide to change the name that will bring you all values

@devilcoastie8295 7 жыл бұрын

Thank you Kudvenkat and Michael G, I too was experience the problem where the generic Handler was testing correctly, but the TextBox was returning all rows in my project. Michael's comment inspired me to exactly follow the tutorial and not change string term = context.Request["term"] ?? ""; to something more suited to my project which was: shelf. Oddly... after having a successful test, I changed all "term' to 'shelf' and the logic failed to pass the input to the stored procedure correctly. I am new to this functionally so I curious why: string term and ParameterName = "@term", Value = term is so finicky for passing data to the sprock parameter? It is as if there is matching on string term = @term. So... if anyone else is lost a bit of hair... do not vary from the lesson until successful, then make your modifications.

@gabrieleduardozunigacastil1952 7 жыл бұрын

amm a did the same as you said!! but the problem still the same, generic Handler works perfect but the textbox in my asp.net web form at running time doens't change while typing....

@fajarkurniawan5657 7 жыл бұрын

Select * from tblStudents Create proc spGetStudentsNames @term nvarchar(50) as Begin Select Name from tblStudents where Name like @term + '%' End Msg 111, Level 15, State 1, Procedure spGetStudentsNames, Line 6 'CREATE/ALTER PROCEDURE' must be the first statement in a query batch. help

@Hrshvardhn481216 6 жыл бұрын

bro select * from tblstudents is table not procedure .it is used in procedures. thats y ur error saying create/alter procedure must be first statement