locked
Auto complete not working - Help RRS feed

  • Question

  • User-588203678 posted

    Hi,

    I have autocomplete textbox in asp.net. it is not working

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeBehind="Default.aspx.cs" Inherits="Sample._Default" %>
    
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
       <!DOCTYPE html>
    
    
    <head id="Head1">
        <title>jQuery AutoComplete with Highlight Search Term using Asp.net</title>
       
        <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <link href="Scripts/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
    
            $(document).ready(function () {
                $("#txtAutoComplete").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "Default.aspx/GetCategory",
                            data: "{'term':'" + $("#txtAutoComplete").val() + "'}",
                            dataType: "json",
                            success: function (data) {
                                response(data.d);
                            },
                            error: function (result) {
                                alert("Error");
                            }
                        });
                    }
                });
            });
    
        </script>
    </head>
    
            <div>
                <input type="text" id="txtAutoComplete" />
            </div>
        
    
    
    </asp:Content>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data.SqlClient;
    using System.Web.Services;
    
    namespace Sample
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
            [WebMethod]
            public static string[] GetCategory(string term)
            {
                List<string> retCategory = new List<string>();
                string ConnectionString = @"Data Source=DESKTOP-MF5OCIT\GUHANANTH;Initial Catalog=ReportServer$GUHANANTH;Integrated Security=True";
                using (SqlConnection con = new SqlConnection(ConnectionString))
                {
                    string query = string.Format("select FName from Employee where FName Like '%{0}%'", term);
                    using (SqlCommand cmd = new SqlCommand(query, con))
                    {
                        con.Open();
                        SqlDataReader reader = cmd.ExecuteReader();
    
                        while (reader.Read())
                        {
                            retCategory.Add(reader.GetString(0));
                        }
                    }
                    con.Close();
                }
                return retCategory.ToArray();
            }
    
        }
    }
    

    It says error

    JavaScript runtime error: Object doesn't support property or method 'autocomplete'

    Tuesday, June 28, 2016 1:54 AM

Answers

  • User61956409 posted

    Hi guhananth1,

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <link href="Scripts/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    Firstly, you could use F12 developer tools Network tool to check if all required JS files are loaded successfully in your web page.

    Secondly, it seems that you do not add reference to jquery-ui.js file, please download the file and include it in your project and add reference to it in your web page.

    https://jqueryui.com/autocomplete/

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 29, 2016 5:39 AM
  • User-1034726716 posted

    autocomplete is a jQueryUI feature. You also need to add reference to jQueryUI so you can utilize it. Also you have redundant reference to jQuery lib. Update your reference to this and see if that works:

        
         <link href="Scripts/jquery-ui.css" rel="stylesheet" type="text/css" />
         <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
         <script src="Scripts/jquery-ui-1.11.4.min.js" type="text/javascript"></script>

    Note: You need to replace the version of jQueryUI based on the version that you have under your Scripts folder.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 29, 2016 5:40 AM

All replies

  • User61956409 posted

    Hi guhananth1,

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <link href="Scripts/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    Firstly, you could use F12 developer tools Network tool to check if all required JS files are loaded successfully in your web page.

    Secondly, it seems that you do not add reference to jquery-ui.js file, please download the file and include it in your project and add reference to it in your web page.

    https://jqueryui.com/autocomplete/

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 29, 2016 5:39 AM
  • User-1034726716 posted

    autocomplete is a jQueryUI feature. You also need to add reference to jQueryUI so you can utilize it. Also you have redundant reference to jQuery lib. Update your reference to this and see if that works:

        
         <link href="Scripts/jquery-ui.css" rel="stylesheet" type="text/css" />
         <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
         <script src="Scripts/jquery-ui-1.11.4.min.js" type="text/javascript"></script>

    Note: You need to replace the version of jQueryUI based on the version that you have under your Scripts folder.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 29, 2016 5:40 AM
  • User-1034726716 posted

    autocomplete is a jQueryUI feature. You also need to add reference to jQueryUI so you can utilize it. Also you have redundant reference to jQuery lib. 

    Please refrain from making duplicate threads and instead focus on a single thread. Please check you other thread here for answer: http://forums.asp.net/t/2098234.aspx?Auto+complete+not+working+Get+data+from+DB

    Thank you.

    Wednesday, June 29, 2016 5:43 AM
  • User61956409 posted

    Hi guhananth1,

    You need to add references to both jQuery and jQuery UI files, here is a complete example, you could refer to it.

    http://www.aspsnippets.com/Articles/Implement-jQuery-AutoComplete-TextBox-from-database-using-AJAX-PageMethods-in-ASPNet.aspx

    Best Regards,

    Fei Han

    Wednesday, June 29, 2016 6:49 AM
  • User-588203678 posted

    Hi,

    I am using VS 2013 and I had included ajax control dll 4.01 version. But Autocomplete is not working .

    Guhan

    Friday, July 1, 2016 2:40 AM
  • User61956409 posted

    Hi guhananth1,

    The code you provided in your previous is for jQuery autocomplete plugin, not AutoCompleteExtender control. Please refer to our replies to download and include the jQuery UI library in your project, and add references to required files in your web page. Besides, I shared you a tutorial that explained how to implement and populate jQuery AutoComplete TextBox from database, do you read it?

    Best Regards,

    Fei Han

    Friday, July 1, 2016 9:36 AM
  • User-588203678 posted

    Hi,

    http://www.c-sharpcorner.com/uploadfile/0c1bb2/autocomplete-extender-using-asp-net/http://www.c-sharpcorner.com/uploadfile/0c1bb2/autocomplete-extender-using-asp-net/
    
    
    
    
    
    
    
    
    
    
               TargetControlID="TextBox1"    
                ID="AutoCompleteExtender1" 
    
    
    
    
               runat="server" 
                FirstRowSelected="false">    
         </asp:AutoCompleteExtender> 
    
    
    
    
    
    
    
    
    
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
     02.  
     03.<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
     04.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
     05.<html xmlns="http://www.w3.org/1999/xhtml">  
     06.<head runat="server">  
     07.    <title></title>  
     08.</head>  
     <body style="background-color: #0000FF">  
        <form id="form1" runat="server">  
         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">  
       
         </asp:ScriptManager>  
         <table style="margin-top:40px;color:White">  
             <tr>  
                 <td>  
                     Search County  
                 </td>  
                 <td>  
                     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
                     <asp:AutoCompleteExtender ServiceMethod="GetCompletionList" MinimumPrefixLength="1"  
                         CompletionInterval="10" EnableCaching="false" CompletionSetCount="1" TargetControlID="TextBox1"  
                         ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false">  
                     </asp:AutoCompleteExtender>  
                 </td>  
             </tr>  
         </table>  
         </form>  
     </body>  
     </html>  
     --------------------------------------
     [System.Web.Script.Services.ScriptMethod()]  
       [System.Web.Services.WebMethod]  
       public static List<string> GetCompletionList(string prefixText, int count)  
       {  
           using (SqlConnection con = new SqlConnection())  
           {  
               con.ConnectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;  
                        
               using (SqlCommand com = new SqlCommand())  
               {  
                   com.CommandText = "select CountryName from Countries where " + "CountryName like @Search + '%'";  
                    
                   com.Parameters.AddWithValue("@Search", prefixText);  
                   com.Connection = con;  
                   con.Open();  
                  List<string> countryNames = new List<string>();  
                   using (SqlDataReader sdr = com.ExecuteReader())  
                   {  
                       while (sdr.Read())  
                       {  
                           countryNames.Add(sdr["CountryName"].ToString());  
                       }  
                   }  
                   con.Close();  
                   return countryNames;  
                   
                    
               }  
               
           }  
          
       }  
     -----------------------------------------------------------
      <asp:AutoCompleteExtender ServiceMethod="GetCompletionList"
                MinimumPrefixLength="1"    
                CompletionInterval="10" 
                EnableCaching="false"
                CompletionSetCount="1" 

    Friday, July 1, 2016 6:46 PM
  • User2053451246 posted

    You need to be more explicit about what you mean by "not working".  You've basically gone to the mechanic and said "there is something wrong with my car, fix it".

    What isn't working?  Which line is there an error?

    Friday, July 1, 2016 7:14 PM
  • User-588203678 posted

    Hi,

    In DB for Name  I have

    • Arun
    • Basker
    • Dinesh

    If I type A in textbox of Autocomplete, it is not showing Arun.

    Need help

    Saturday, July 2, 2016 2:31 AM
  • User475983607 posted

    Try debugging the code - single step - using the Visual Studio debugger.

    https://msdn.microsoft.com/en-us/library/y740d9d3.aspx

    All modern browser have developer tools. Open the browser's developer tools (F12) to look for any errors in the console.  

    https://developer.chrome.com/devtools

    I would do the above steps first which will help to identify where the code is failing.  Once you identify the problem area it's usually fairly straight forward to figure out a solution.  The key is to find the bug.

    Saturday, July 2, 2016 1:06 PM
  • User61956409 posted

    Hi guhananth1,

    Firstly, the issue is related to jQuery autocomplete in your first post, and we have shared the solution and tutorial, do you refer to our replies?

    guhananth1

    In DB for Name  I have

    • Arun
    • Basker
    • Dinesh

    If I type A in textbox of Autocomplete, it is not showing Arun.

    Secondly, please debug your code to make sure if the Web method GetCompletionList() could be called and if you could get the records from database based on prefixText. And you could check this tutorial using AutoCompleteExtender control.

    http://www.aspsnippets.com/Articles/AJAX-AutoCompleteExtender-Example-in-ASPNet.aspx

    Besides, you asked a new question related to AutoCompleteExtender control, you could post a new thread for AutoCompleteExtender control issue.

    Best Regards,

    Fei Han

    Tuesday, July 5, 2016 10:48 AM