Asked by:
How to create Autocomplete Textbox in Asp.net with Database with JSON data.

Question
-
User-930371450 posted
Hi Team,
I tried below to fill the textbox like auto complete with using below example reference
https://www.aspdotnet-suresh.com/2015/06/jquery-autocomplete-textbox-in-aspnet-with-database-example-using-csharp-vbnet.html
but unable to populate the same with JSON data.<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> HTML Data: <input type="text" id="txtSearch" class="autosuggest" /> <div> Selected UserId:<b><label id="lblUserId" /></b> </div> ---Json Data---- [ { "ID": 301905, "Name": "Adam" }, { "ID": 301267, "Name": "David" } ] ------JQuery function---------- $(function () { SearchText(); }); function SearchText() { $(".autosuggest").autocomplete({ source: function (request, response) { var UserName = $('#txtSearch').val(); var Type = "Get"; $.ajax({ type: "POST", url: "Users.ashx", dataType: "html", async: true, data: { username:UserName }, success: function (data) { alert(data); var users = $.parseJSON(data); for (var prop in users) { var item = users[prop]; console.log(item); label: item.ID, value: item.Name } //response($.map(html, function (users) { // return { // label: users.ID, // value: users.Name // }; //})); //if (users.d.length > 0) { // response($.map(users.d, function (item) { // return { // label: item.split('/')[0], // val: item.split('/')[1] // } // })); //} //else { // response([{ label: 'No Records Found', val: -1 }]); //} }, error: function (result) { alert("Error"); } }); }, select: function (event, ui) { if (ui.item.val == -1) { return false; } $('#lblUserId').text(ui.item.val); } }); }
Friday, November 23, 2018 12:54 PM
All replies
-
User1281381861 posted
Please share the error you are getting.
Friday, November 23, 2018 3:44 PM -
User283571144 posted
Hi SSK_Nani,
I tried below to fill the textbox like auto complete with using below example reference
https://www.aspdotnet-suresh.com/2015/06/jquery-autocomplete-textbox-in-aspnet-with-database-example-using-csharp-vbnet.html
but unable to populate the same with JSON data.As far as I know, if you want to use ajax to get the jquery autocomplete source, you should return the source in the response function.
More details, you could refer to below codes:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteWithAjax.aspx.cs" Inherits="AspNetNormalIssue.AutoCompleteWithAjax" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript"> $(function () { SearchText(); }); function SearchText() { $(".autosuggest").autocomplete({ source: function (request, response) { var UserName = $('#txtSearch').val(); var Type = "Get"; $.ajax({ type: "POST", url: "Users.ashx", dataType: "json", async: true, data: { username:UserName }, success: function (data) { response($.map(data, function (item) { return { label: item.ID, value: item.Name }; })); //if (users.d.length > 0) { // response($.map(users.d, function (item) { // return { // label: item.split('/')[0], // val: item.split('/')[1] // } // })); //} //else { // response([{ label: 'No Records Found', val: -1 }]); //} }, error: function (result) { alert("Error"); } }); }, select: function (event, ui) { if (ui.item.label == -1) { return false; } $('#lblUserId').text(ui.item.label); } }); } </script> </head> <body> <form id="form1" runat="server"> <div> <input type="text" id="txtSearch" class="autosuggest" /> <div> Selected UserId:<b><label id="lblUserId" /></b> </div> </div> </form> </body> </html>
ASHX:
public void ProcessRequest(HttpContext context) { context.Response.Write("[{\"ID\": 301905, \"Name\": \"Adam\" }, { \"ID\": 301267, \"Name\": \"David\"} ]"); }
Result:
Best Regards,
Brando
Monday, November 26, 2018 6:48 AM