Click here to Skip to main content
15,561,118 members
Please Sign up or sign in to vote.
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
Comments
You can put debugger and test.

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>
 
Share this answer
 
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.
 
Share this answer
 
Comments
sivasankari ts 6-Mar-14 5:44am    
Thank you
[no name] 6-Mar-14 6:04am    
U are welcome.
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
 
Share this answer
 
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
 
Share this answer
 
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);
}
});

});
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900