Remove From My Forums

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

0

Sign in to vote

User1281381861 posted

Please share the error you are getting.

Friday, November 23, 2018 3:44 PM

User283571144 posted

Hi SSK_Nani,

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

Asked by:

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

Question

All replies