Andrew
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('t xtAutoComp lete').val ue + "'}",
TIA,
Andrew
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('t
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
TIA,
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>
So from the HTML we are clear that the id is different which is dtv_txtAutoComplete Just replace the old id in
With dtv_txtAutoComplete like this:
document.getElementById('txtAutoComplete').value
With dtv_txtAutoComplete like this:
document.getElementById('dtv_txtAutoComplete').value
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That error occurs when I enter a character into the textbox
A quick question where/how you added the superfish.js?
ASKER
I have mocked up a bare bone aspx page for this now and am still getting that same error.
autocomplete.aspx
autocomplete.aspx.vb
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>
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
ASKER
This is a hosted GoDadddy account I am using also.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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!
For this press Ctrl + u in chrome and share here.
The issue here is that there is no such element which have id="txtAutoComplete".