In this article we are going to see how to implement a auto complete textbox, when we type in Facebook search we can see that some option are listed out when we type in search textbox, now we are going to implement like that one.To do this instead of database i am using custom collection. create a web service which will return the result to the textbox based on the input , autocomplete options are visible to users.
For do this please download the jQuery UI autocomplete.
WebService code:
For implement the auto complete in a textbox, we have to use the ClientID of textbox and make a Ajax call for the webservice by passing the parameter in json format and write the result d in Response. Now when ever users start typing the country name automatically countries name in that format are listed out.
Html code;
Output:
This article will help users to implement the auto complete textbox in the application.
For do this please download the jQuery UI autocomplete.
WebService code:
[System.Web.Script.Services.ScriptService]
public class CountriesService : System.Web.Services.WebService
{
public List<string> Get()
{
List<string>
country = new List<string>();
country.Add("India");
country.Add("Italy");
country.Add("Iran");
country.Add("America");
country.Add("United Kingdom");
country.Add("Japan");
country.Add("China");
country.Add("Australia");
country.Add("Srilanka");
country.Add("Pakistan");
country.Add("Afganistan");
country.Add("South Africa");
country.Add("Bangladesh");
return country;
}
[WebMethod]
public List<string> GetCountries(string
countryname)
{
List<string>
output = Get().Where(x =>
x.ToUpper().StartsWith(countryname.ToUpper())).ToList();
return output;
}
}
Html code;
<script type="text/javascript"
language="javascript">
$(function () {
$('#<%= countryname.ClientID %>').autocomplete({
source: function (request, response) {
$.ajax({
url: "CountriesService.asmx/GetCountries",
data: "{ 'countryname': '" + request.term + "' }",
type: "POST",
datatype: "json",
contentType: "application/json;charset=utf-8",
success: function (result) {
response(result.d);
},
error: function (result) {
alert("There is problem in processing in Request.");
}
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server"
align="center">
<br />
<br />
<div style="font-family:Arial">
Country
Name
<asp:TextBox Width="450px" ID="countryname" runat="server"></asp:TextBox>
<asp:Button ID="submit" Text="Search"
runat="server"
/>
<br />
</div>
</form>
</body>
</html>
Output:
This article will help users to implement the auto complete textbox in the application.
how to implement it in master page this is the real change to implement in master page..if any solution please inform
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete