I want to add the autocomplete textbox in asp.net with masterpage using WebMethod and my logic is not working well I have read this autocomplete not working and external js file placement and I'm not sure where I did the mistake below is my code.
I have created simple master page
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Delete_auto.master.cs" Inherits="TradePages.Delete_auto" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
And next I have added the webform with master page and added the related scripts and external js file path (I downloaded the jquery script links from this and thislink)
<%@ Page Title="" Language="C#" MasterPageFile="~/Delete_auto.Master" AutoEventWireup="true" CodeBehind="Delete_auto_text.aspx.cs" Inherits="TradePages.Delete_auto_text" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="atjavascript/delete_auto.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Label runat="server" Text="Enter ash to get fullname"></asp:Label>
<asp:TextBox ID="txtAutotext" ClientIDMode="Static" runat="server"></asp:TextBox>
</asp:Content>
And next I created the external JavaScript file and added the code
<script type="text/javascript" src="atjavascript/delete_auto.js"></script>
$(document).ready(function () {
////textbox auto complete
//txtAutotext
$("#<%= txtAutotext.ClientID %>").autocomplete({
source: function (request, response) {
//debugger;
var param = { text: $('#txtAutotext').val() };
$.ajax({
url: "Delete_auto_text.aspx/GetFirstNames",
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) {
//document.getElementById("smblerror").style.display = "none";
return data;
},
success: function (data) {
//debugger;
if (data.d.length == 0) {
//document.getElementById("alterror").style.display = "";
}
else {
response($.map(data.d, function (item) {
document.getElementById("alterror").style.display = "none";
return {
value: item
}
}))
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 3 //This is the Char length of inputTextBox
});
});
And next I used the simple WebMethod logic in codebehind
[WebMethod]
public static string GetFirstNames(string text)
{
string name = "ash";
string statusreturn = "";
try
{
if (text == name)
{
statusreturn = "Ashok";
}
}
catch (Exception ex)
{
throw ex;
}
return statusreturn;
}
And next I have run this code and I didn't get any error and code is not executing
Suggest me how to achieve this and where I did the mistake.