There are many examples out there demonstrating how to implement autocomplete textbox, but most of them are using Ajax autocompleteextender control and webservice, which can make it complex especially to beginners.
Today I will show you, how to implementing Autocomplete textbox in ASP.NET without using Webservice & AJAX autocompleteextender control. Here in this application, we will implement autocomplete textbox using jQuery AutoComplete Widget.
Here I have done following
Today I will show you, how to implementing Autocomplete textbox in ASP.NET without using Webservice & AJAX autocompleteextender control. Here in this application, we will implement autocomplete textbox using jQuery AutoComplete Widget.
Here I have done following
- Simple autocomplete textbox application using jQuery AutoComplete Widget.
- Multi-values autocomplete textbox.
- Autocomplete textbox with image.
If you are developing your application using AngularJS, must see Implement autocomplete textbox in AngularJS
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Steps :
Step - 1: Create New Project.
Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.Step-2: Add a Database.
Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.Step-3: Create table for fetch data.
Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.Step-4: Add Entity Data Model.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.
HTML Code
Step-5: Add a Webpage and Design for implementing Autocomplete textbox.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.HTML Code
JS Code
- <h3>Auto Complete Textbox without using Web Service</h3>
- <table>
- <tr>
- <td>Type Company Name: </td>
- <td>
- <div class="ui-widget" style="text-align:left">
- <asp:TextBox ID="txtCompanyName" runat="server" Width="350px" CssClass="textboxAuto" Font-Size="12px" />
- </div>
- </td>
- </tr>
- </table>
- <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 language="javascript" type="text/javascript">
- $(function () {
- $('#<%=txtCompanyName.ClientID%>').autocomplete({
- source: function (request, response) {
- $.ajax({
- url: "Default.aspx/GetCompanyName",
- data: "{ 'pre':'" + request.term + "'}",
- dataType: "json",
- type: "POST",
- contentType: "application/json; charset=utf-8",
- success: function (data) {
- response($.map(data.d, function (item) {
- return { value: item }
- }))
- },
- error: function (XMLHttpRequest, textStatus, errorThrown) {
- alert(textStatus);
- }
- });
- }
- });
- });
- </script>
Step-6: Write a function for fetch data from database and show in Autocomplete TextBox.
- [WebMethod]
- [ScriptMethod(ResponseFormat= ResponseFormat.Json)]
- public static List<string> GetCompanyName(string pre)
- {
- List<string> allCompanyName = new List<string>();
- using (MyDatabaseEntities dc = new MyDatabaseEntities())
- {
- allCompanyName = (from a in dc.TopCompanies
- where a.CompanyName.StartsWith(pre)
- select a.CompanyName).ToList();
- }
- return allCompanyName;
- }
No comments:
Post a Comment