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

  • 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