WebForm1.aspx:-
-------------------------
WebForm2.aspx.cs:-
-----------------------------
Other Example:-
------------------------
Thank You.
-------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$("#txtSearch").autocomplete({
source: function (request, response)
{
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebForm2.aspx/GetAutoCompleteData",
data: "{'username':'" +
$("#txtSearch").val() + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
},
select: function (event, ui) {
fillDdl(ui.item.value);
}
});
function fillDdl(value) {
$.ajax({
url: "WebForm2.aspx?name=" + value,
async: true,
data: {
},
success: function (data) {
var n = data.split(",");
for (var i = 0; i < n.length; i++) {
var newOption = $('<option value="' +
n[i] + '">' + n[i] + '</option>');
$('#ddl').append(newOption);
}
},
error: function (data) {
alert(data);
}
});
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<label for="lblSearch">Search: </label>
<input id="txtSearch" />
<select id="ddl">
<option>Select</option>
</select>
</div>
</form>
</body>
</html>
-----------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication2
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string strName = Request.QueryString["name"];
if (strName != "" && strName != null)
{
var strResult1 = "a,b,c,d";
HttpContext.Current.Response.Clear();
HttpContext.Current.Response.Write(strResult1);
HttpContext.Current.Response.End();
}
}
[WebMethod]
public static List<string> GetAutoCompleteData(string username)
{
List<string> result = new List<string>();
result.Add("one");
result.Add("two");
result.Add("three");
return result;
}
//[WebMethod]
//public
static List<string> GetAutoCompleteData(string username)
//{
// List<string> result = new
List<string>();
// using (SqlConnection con = new
SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial
Catalog=MySampleDB"))
// {
// using (SqlCommand cmd = new
SqlCommand("select DISTINCT UserName from UserInformation where UserName
LIKE '%'+@SearchText+'%'", con))
// {
// con.Open();
//
cmd.Parameters.AddWithValue("@SearchText", username);
// SqlDataReader dr =
cmd.ExecuteReader();
// while (dr.Read())
// {
//
result.Add(dr["UserName"].ToString());
// }
// return result;
// }
// }
//}
}
}
---------------------------------------------------------------------------Other Example:-
------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication2.WebForm3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
var x = [
{ label: 'apple', value: 'Delicious' },
{ label: 'kiwi', value: 'Yummy' },
{ label: 'kiwiooo', value: 'aaa' },
{ label: 'lemon', value: 'Sour' }
];
$("#fruit").autocomplete({
source: x,
focus: function () { return false; }
})
.on('autocompleteresponse
autocompleteselect', function (e, ui) {
var t = $(this),
details = $('#details'),
label = (e.type == 'autocompleteresponse' ?
ui.content[0].label : ui.item.label),
value = (e.type == 'autocompleteresponse' ?
ui.content[0].value : ui.item.value);
t.val(label);
details.val(value);
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id='fruit' name='fruit' type='text'>
<input id='details' name='details' type='text'>
</div>
</form>
</body>
</html>
