JQuery Autocomplete/Autosearch Textbox

Riddhi Valecha

6y2.4k.NET

Dear Team,

I want to implement an Autocomplete / Autosearch textbox in normal web page.

I have tried all the methods, but I get only 1 error -

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

My Code -

<%@ Page Language="VB" AutoEventWireup="false" CodeFile=" frmManageAdmission.aspx.vb" Inherits=" frmManageAdmission" %>
"http://www.w3.org/1999/xhtml">
"server">
"Form1" method="post" runat="server">
"stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript">
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript">
"text/javascript">
$(document).ready(function () {
$("#<%=txtFirstName.ClientID%>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/frmManageAdmission.aspx/GetFirstNames") %>',
data: "{ 'prefixText': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-x-')[1],
val: item.split('-x-')[0]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hdnfldFirstName.ClientID%>").val(i.item.val);
},
minLength: 2
});
});
"0" cellpadding="6" width="100%" border="0">
First Name
"txtFirstName" runat="server" MaxLength="100" OnTextChanged="txtFirstName_TextChanged" AutoPostBack="true" CssClass="autosuggest">
"hdnfldFirstName" runat="server" />

Ccs/vb code -

#Region "ConnectionString"
_
Public Shared Function ConnectionString() As String
Try
Return ConfigurationManager.ConnectionStrings("DBConnectionString").ConnectionString.Trim
Catch err As Exception
err.Message.ToString()
Return Nothing
End Try
End Function
#End Region
#Region "CheckIfConnectionIsOpen"
_
Public Function IsOpen() As Boolean
Try
SqlConnection.ClearAllPools()
con = New SqlConnection
If con.ConnectionString Is String.Empty Then
con.ConnectionString = ConnectionString()
End If
If con.State = ConnectionState.Closed Then
con.Open()
Return True
Else
Return True
End If
Catch err As Exception
err.Message.ToString()
Return False
End Try
End Function
#End Region
#Region "GetFirstNames"
''
_
Public Function GetFirstNames(ByVal prefixText As String) As String()
Try
If IsOpen() = True Then
Dim s As String = HttpContext.Current.Session("AutoSuggestFirstName").ToString
''Dim TrainingSubjects = New List(Of String)
Dim FirstNames = New List(Of String)
cmd = New SqlCommand
cmd.Connection = con
cmd.CommandText = "SP_AutoSuggestFirstName"
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@PreficxFirstName", prefixText)
Using sdr As SqlDataReader = cmd.ExecuteReader
While sdr.Read
FirstNames.Add(String.Format("{0}-{1}", sdr("Candidate_FName"), sdr("am_id")))
End While
End Using
Return FirstNames.ToArray
Else
Return Nothing
End If
Catch err As Exception
err.Message.ToString()
Return Nothing
End Try
End Function
#End Region

Please let me know - where I am going wrong..

11 Replies

Know the answer? Post it — somebody with the same question will find it here.

Amit Mohanty6y ago
Accepted answer
Hey Riddhi,
Change below code
<%@ WebService Language="C#" CodeBehind="~/App_Code/CSharpCode/AdmissionAutoSearchWebService.cs" Class="AdmissionAutoSearchWebService" %>
to
<%@ WebService Language="C#" CodeBehind="AdmissionAutoSearchWebService.cs" Class="RFS.App_Code.CSharpCode.AdmissionAutoSearchWebService" %>
and try.
Amit Mohanty6y ago
Hey Riddhi,

Check the attached application file.
Riddhi Valecha6y ago
Dear all,
I have made the following attempts -

1. Written all web method in code behind page - aspx.vb code file.
I tried entering this page path in the Javscript, but could not debug the code and load values.

2. I have made a webserivce (.asmx file) - by default the code file gets loaded in app_code folder
I tried entering path of webserivce also in the javascript, but could not do the autosearch or debug.

Now, how do I go about it ??
Riddhi Valecha6y ago
Dear Team,
I have attached the structure of my project .
Name - School
Folder - Admission/AdmissionAutoSearchWebService.asmx
CodeBehind -
<%@ WebService Language="C#" CodeBehind="~/App_Code/CSharpCode/AdmissionAutoSearchWebService.cs" Class="AdmissionAutoSearchWebService" %>
App_Code -> App_Code/CSharpCode -> AdmissionAutoSearchWebService.cs.
How do I make the URL in Javascript ??
None of the below are working -

//url: '../Admission/AdmissionAutoSearchWebService.asmx/GetFirstNames")',

<%-- url: '<%=ResolveClientUrl("~/Admission/AdmissionAutoSearchWebService.asmx/GetFirstNames")%>',--%>

<%-- url: '<%Server.MapPath("../Admission/AdmissionAutoSearchWebService.asmx/GetFirstNames")%>',--%>

url: '<%=ResolveUrl("/Admission/AdmissionAutoSearchWebService.asmx/GetFirstNames")%>',
Riddhi Valecha6y ago
Dear Team,

After adding those files, I am getting error -

0x800a138f - JavaScript runtime error: Unable to get property 'length' of undefined or null reference
Ashutosh Gupta6y ago
check this link if that helps you
https://www.w3schools.com/howto/howto_js_autocomplete.asp

Ramachandran M6y ago

Issue with Jquery Version Mismatch

 rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
 src="https://code.jquery.com/jquery-3.2.1.min.js">
 src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js">

Rajeesh Menoth6y ago
Hi,

The version that you have used older one and Jquery auto complete need for the upgraded version like the following one.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js">script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">script>
Example :

https://jqueryui.com/autocomplete/
Amit Mohanty6y ago
Hey add below script reference to your page
"stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
"http://code.jquery.com/jquery-1.9.1.js">
"http://code.jquery.com/ui/1.10.3/jquery-ui.js">
Jignesh Kumar6y ago
Please find below link,
https://www.aspsnippets.com/Articles/Populate-jQuery-AutoComplete-TextBox-from-Database-using-Web-Service-in-ASPNet.aspx
Garishma G6y ago
Hi there,
https://www.w3schools.com/howto/howto_js_filter_lists.asp
Solution to ur issue is in above link.
Happy coding :)