Auto complete using jquery in Asp.net

Question

0.00/5 (No votes)

See more:

My auto complete textbox is fetching data on each page load alone..It is not fetching continuously.Here is my code below.Please help me

XML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
     <script type="text/javascript">
         $(function () {

             $("#<%=txtProduct.ClientID %>").autocomplete({

                 source: function (request, response) {

                       $.ajax({

                           url: '<%=ResolveUrl("~/Service.asmx/GetProduct") %>',
                           data: "{ 'prefix': '" + request.term + "'}",
                           dataType: "json",
                           type: "POST",
                           dataFilter: function (data) { return data; },
                           contentType: "application/json; charset=utf-8",
                           success: function (data) {

                               response($.map(data.d, function (item) {

                                   return {
                                       label: item.split('-')[0],
                                       val: item.split('-')[1],
                                   }

                               }))

                           },

                           error: function (response) {
                               alert(response.responseText);
                           },
                           failure: function (response) {
                               alert(response.responseText);
                           }
                       });
                   }, minLength: 1,
                   focus: function (e, i) {
                       $("#<%=hfProduct.ClientID %>").val(i.item.val);
                       return false;
                   },
                   select: function (e, i) {
                       $("#<%=hfProduct.ClientID %>").val(i.item.val);

                   }

               });

           });
       </script>

XML

<asp:TextBox    ID="txtProduct" runat="server"
 ></asp:TextBox>

Posted 5-Mar-14 19:18pm

sivasankari ts

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 6-Mar-14 1:27am

You can put debugger and test.

5 solutions

Solution 1

Hi...
See this example!.

XML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

Thank u.

Posted 5-Mar-14 23:37pm

Murali0195

Comments

sivasankari ts 6-Mar-14 5:44am

Thank you

[no name] 6-Mar-14 6:04am

U are welcome.

Solution 3

C#

<title>jQuery Autocomplete Sample</title>
        <link rel="stylesheet" href="theme/jquery.ui.all.css">
        <script src="jquery-1.4.4.js"></script>
        <script src="ui/jquery.ui.core.js"></script>
        <script src="ui/jquery.ui.widget.js"></script>
        <script src="ui/jquery.ui.position.js"></script>
        <script src="ui/jquery.ui.autocomplete.js"></script>
<script>
            $(function () {
                var technologies = [
                        "ActiveDirectory",
                        "ADO.NET",
                        "AJAX",
                        "Algorithms",
                        "ASP.NET",
                        "ASP.NET MVC",
                        "Assemblies",
                        "BizTalk Server",
                        "C#",
                        "Career Advice",
                        "Cloud Computing",
                        "COBOL.NET",
                        "Compact Framework",
                        "Deployment",
                        "DirectX",
                        "Enterprise Development",
                        "Exception Handling",
                        "Financial Applications",
                        "Games Programming",
                        "Hardware",
                        "HTML",
                        "JQuery",
            "LINQ",
            "MESSAGE QUEUE",
            "Mobile EMBEDDED",
            "Networking",
            "Pocket PC",
            "Printing",
            "Project Management",
            "Remoting",
            "Sharepoint",
            "Silverligh",
            "Testing",
            "Threading",
            "WCF",
            "Web Forms",
            "Web Services",
            "WF",
            "Windows Phone"
                ];
                $("#tags").autocomplete({
                    source: technologies
                });
            });
        </script>
    <style type="text/css">
        #tags {
            width: 249px;
        }
    </style>
Now add a INPUT html control inside of form tag.

<div class="demo">
    <div class="ui-widget">
        <label for="tags">Technologies: </label>
        <input id="tags">
            style="font-family: 'Cordia New'; font-size: x-large; font-weight: normal; font-style: italic; font-variant: normal; color: #FF0000" />
    </input></div>
    </div>   
</link>

or you can refer:

AutoComplete using JQuery

Posted 6-Mar-14 0:01am

Nimit Joshi

Solution 4

XML

<asp:TextBox ID="txtSearch" runat="server" Width="365" AutoComplete="OFF" />

                   <div ID="divwidth"></div>  <ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="txtSearch" ServicePath="AutoComplete.asmx" ServiceMethod="GetCountriesList" MinimumPrefixLength="1" EnableCaching="true" CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight" CompletionListElementID="divwidth" /></td>

*webservice*
autocomplete.asmx

]]>

*class file*

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using MySql.Data.MySqlClient;
using System.Configuration;

///

/// Summary description for WebService
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]

public class AutoComplete : System.Web.Services.WebService
{
public string connString = ConfigurationManager.ConnectionStrings["connString"].ToString();
[WebMethod]
public string[] GetCountriesList(string prefixText)
{

DataSet dtst = new DataSet();
MySqlConnection sqlCon = new MySqlConnection(connString);
//string strSql = "SELECT top 10 company_name,country FROM company WHERE verify_status='Yes' and delete_status='No' ";
string strSql = "SELECT company_name FROM company WHERE company_name LIKE '" + prefixText + "%' and verify_status='Yes' and delete_status='No' limit 10 ";

MySqlCommand sqlComd = new MySqlCommand(strSql, sqlCon);
sqlCon.Open();
MySqlDataAdapter sqlAdpt = new MySqlDataAdapter();
sqlAdpt.SelectCommand = sqlComd;
sqlAdpt.Fill(dtst);
string[] cntName = new string[dtst.Tables[0].Rows.Count];
int i = 0;

try
{
foreach (DataRow rdr in dtst.Tables[0].Rows)
{
// string str = rdr["country"].ToString();
// str=str.PadLeft(10,' ');

cntName.SetValue(rdr["company_name"].ToString(), i);
i++;
}

}
catch { }
finally
{
sqlCon.Close();
}

return cntName ;

}

}

this will defnetly give output

Posted 6-Mar-14 0:24am

Member 9671482

Solution 5

Hi Friend,
Please have look on two solution. And don't forget to keep the following attribute in your service.

[System.Web.Script.Services.ScriptService]

1- Without Id Field
$(document).ready(function() {
$("#AutoCompleteText").autocomplete({
source: function(request, response) {
$.ajax({
url: "WebServiceName.asmx/YourMethodName",
data: request.term,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2
});
});

2- if you need id field

$(document).ready(function () {
$("#AutoCompleteText").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebServiceName.asmx/YourMethodName",
dataType: "json",
data: "{'Value':'" + request.term + "'}",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.Name + '(' + item.Value + ')',
value: item.Name
}
}))
}
});
},
minLength: 2,
select: function (event, ui) {

},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});

});

Posted 6-Mar-14 0:35am

anil pathak

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sivasankari ts · Accepted Answer · 2014-03-05T23:44:00

Autocomplete is in update panel. So it does not work for the second time.So i modified the script to below.

XML

<script type="text/javascript">
        $(function () {
            initializer();
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initializer);
        });






        function initializer() {
            $("#<%=txtProduct.ClientID %>").autocomplete({

                source: function (request, response) {

                      $.ajax({

                          url: '<%=ResolveUrl("~/Service.asmx/GetProduct") %>',
                          data: "{ 'prefix': '" + request.term + "'}",
                          dataType: "json",
                          type: "POST",
                          dataFilter: function (data) { return data; },
                          contentType: "application/json; charset=utf-8",
                          delay:0,
                          success: function (data) {

                              response($.map(data.d, function (item) {

                                  return {
                                      label: item.split('-')[0],
                                      val: item.split('-')[1],
                                  }

                              }))

                          },

                          error: function (response) {
                              alert(response.responseText);
                          },
                          failure: function (response) {
                              alert(response.responseText);
                          }
                      });
                  }, minLength: 1,
                  focus: function (e, i) {
                      $("#<%=hfProduct.ClientID %>").val(i.item.val);
                      return false;
                  },
                  select: function (e, i) {
                      $("#<%=hfProduct.ClientID %>").val(i.item.val);

                  }

              });

          }
      </script>