Link to home
Start Free TrialLog in
Avatar of Andrew
AndrewFlag for United States of America

asked on

Textbox autocomplete using jquery in asp.net

Hello, can someone please help me figure out what is causing this error on this line of js code?  I am trying to implement this:  http://www.codingfusion.com/Post/Textbox-autocomplete-using-jquery-in-asp-net

Could it be that the txtAutoComplete is within a detailsview control?  I am using ASP.NET webforms.

ERROR:  Uncaught TypeError: Cannot read property 'value' of null

data: "{'prefixText':'" + document.getElementById('txtAutoComplete').value + "'}",

LoginLanding.aspx:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
	$(document).ready(function () {
		SearchText();
	});
	function SearchText() {
		$(".autosuggest").autocomplete({
			source: function (request, response) {
				$.ajax({
					type: "POST",
					contentType: "application/json; charset=utf-8",
					url: "LoginLanding.aspx/getCountries",
					data: "{'prefixText':'" + document.getElementById('txtAutoComplete').value + "'}",
					dataType: "json",
					success: function (data) {
						response(data.d);
					},
					error: function (result) {
						alert("Error");
					}
				});
			}
		});
	}
</script>
</head>

<asp:DetailsView ID="dtv" runat="server" Width="600px" AutoGenerateRows="False" DataKeyNames="MID" DataSourceID="sqldsGCP21"
	DefaultMode="Edit" OnItemInserting="dtv_ItemInserting" OnItemUpdating="dtv_ItemUpdating">
<Fields>
<asp:TemplateField HeaderText="Country *" SortExpression="Country">
	<EditItemTemplate>
		<asp:TextBox ID="txtAutoComplete" runat="server" cssclass="autosuggest"></asp:TextBox><br/>
	</EditItemTemplate>
	<HeaderStyle VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
</Fields>
</asp:DetailsView>


LoginLanding.aspx.vb:

Public Shared Function getCountries(prefixText As String) As List(Of String)
	Dim countries As New List(Of String)()

	Using conn As New SqlConnection()
		conn.ConnectionString = ConfigurationManager.ConnectionStrings("GCP21DBConnectionString").ConnectionString
		Using cmd As New SqlCommand()
			cmd.CommandText = "SELECT DISTINCT Country FROM [GCP21DBUser.Cities] WHERE " + "Country LIKE @SearchText + '%'"
			cmd.Parameters.AddWithValue("@SearchText", prefixText)
			cmd.Connection = conn
			conn.Open()
			Using dr As SqlDataReader = cmd.ExecuteReader()
				While dr.Read()
					countries.Add(dr("Country").ToString())
				End While
			End Using
			conn.Close()

		End Using
	End Using
	Return countries
End Function

Open in new window


TIA,
Andrew
Avatar of Mukesh Yadav
Mukesh Yadav
Flag of India image

It would be great if you can share the HTML you are getting in the browser.

For this press Ctrl + u in chrome and share here.

The issue here is that there is no such element which have id="txtAutoComplete".
Avatar of Andrew

ASKER

Thank you:

</tr><tr>
	<td valign="middle" style="white-space:nowrap;">Country *</td><td>
	<input name="dtv$txtAutoComplete" type="text" id="dtv_txtAutoComplete" class="autosuggest" /><br/>
	</td>
</tr><tr>

Open in new window

So from the HTML we are clear that the id is different which is dtv_txtAutoComplete Just replace the old id in

document.getElementById('txtAutoComplete').value

Open in new window


With dtv_txtAutoComplete like this:

document.getElementById('dtv_txtAutoComplete').value

Open in new window

Avatar of Andrew

ASKER

I replaced this:
data: "{'prefixText':'" + document.getElementById('txtAutoComplete').value + "'}",

with this:
data: "{'prefixText':'" + document.getElementById('dtv$txtAutoComplete').value + "'}",

and get this error:
User generated image
ASKER CERTIFIED SOLUTION
Avatar of Mukesh Yadav
Mukesh Yadav
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Andrew

ASKER

Sorry about that - thanks!

Well, we are now past that error and have a new one:
User generated image
Avatar of Andrew

ASKER

That error occurs when I enter a character into the textbox
A quick question where/how you added the superfish.js?
Avatar of Andrew

ASKER

I have mocked up a bare bone aspx page for this now and am still getting that same error.

autocomplete.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="autocomplete.aspx.vb" Inherits="Autocomplete" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>    
<script type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $(".autosuggest").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "autocomplete.aspx/getCountries",
                        data: "{'prefixText':'" + document.getElementById('txtAutoComplete').value + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });
        }
</script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txtAutoComplete" runat="server" cssclass="autosuggest"></asp:TextBox><br/>
    </div>
    </form>
</body>
</html>

Open in new window


autocomplete.aspx.vb

Imports System.Web.Services
Imports System.Data.SqlClient
Imports System.Configuration

Partial Class Autocomplete
    Inherits System.Web.UI.Page


 Public Shared Function getCountries(prefixText As String) As List(Of String)
	    Dim countries As New List(Of String)()

	    Using conn As New SqlConnection()
		    conn.ConnectionString = ConfigurationManager.ConnectionStrings("GCP21DBConnectionString").ConnectionString
		    Using cmd As New SqlCommand()
			    cmd.CommandText = "SELECT DISTINCT Country FROM [GCP21DBUser.Cities] WHERE " + "Country LIKE @SearchText + '%'"
			    cmd.Parameters.AddWithValue("@SearchText", prefixText)
			    cmd.Connection = conn
			    conn.Open()
			    Using dr As SqlDataReader = cmd.ExecuteReader()
				    While dr.Read()
					    countries.Add(dr("Country").ToString())
				    End While
			    End Using
			    conn.Close()

		    End Using
	    End Using
	    Return countries
    End Function
End Class

Open in new window

User generated image
Avatar of Andrew

ASKER

This is a hosted GoDadddy account I am using also.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Andrew

ASKER

Thank you!  It is now working with your suggested solutions.

I have another question that I will now post separately about how to filter a second autocomplete textbox named City from whatever is selected in the Country autocomplete textbox.
You're welcome!