Autocomplete textbox using jquery and asp net web service04:33

  • 0
Published on October 19, 2017

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

In this video we will discuss, how to implement autocomplete textbox using jquery and asp.net web service. Along the way, we also discuss the jquery autocomplete source option and minLength option.

jquery autocomplete source option can be set to
1. Array : An array of strings: [ “Choice1”, “Choice2” ]
OR
An array of objects with label and value properties: [ { label: “Choice1”, value: “value1″ }, … ]
The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item.

2. String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. Discussed in Part 71.

3. Callback function. This function has two parameters. request object and a response callback function. The term property of the request object contains the value the user typed in the autocomplete textbox and to the response callback function you will have to pass the data to suggest to the user.

jquery autocomplete minLength option : The minimum number of characters a user must type before a search is performed.

Steps to implement autocomplete textbox in an asp.net webforms application using jQuery and asp.net web service.

Stored procedure to retrieve employee names

Create proc spGetStudentNames
@term nvarchar(50)
as
Begin
Select Name from tblStudents where Name like @term + ‘%’
End

WebService (ASMX) to retrieve StudentNames

using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

namespace Demo
{
[WebService(Namespace = ”
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class StudentService : System.Web.Services.WebService
{
[WebMethod]
public List<string> GetStudentNames(string 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;
cmd.Parameters.Add(new SqlParameter()
{
ParameterName = “@term”,
Value = term
});
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
listStudentNames.Add(rdr[“Name”].ToString());
}
}

return listStudentNames;
}
}
}

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

WebForm HTML & jQuery code.

<%@ Page Language=”C#” AutoEventWireup=”true”
CodeBehind=”WebForm1.aspx.cs” Inherits=”Demo.WebForm1″ %>

<!DOCTYPE html>
<html xmlns=”
<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({
minLength: 2,
source: function (request, response) {
$.ajax({
url: ‘StudentService.asmx/GetStudentNames’,
method: ‘post’,
contentType: ‘application/json;charset=utf-8’,
data: JSON.stringify({ term: request.term }),
dataType: ‘json’,
success: function (data) {
response(data.d);
},
error: function (err) {
alert(err);
}
});
}
});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
Student Name :
<asp:TextBox ID=”txtName” runat=”server”>
</asp:TextBox>
</form>
</body>
</html>

Enjoyed this video?
"No Thanks. Please Close This Box!"