We’ll come back as JSON data, the format is as follows;

[{"value":"jQuery dot Net | dynamic and flexible","id":4},{"value":"Category 3","id":3},{"value":"Category 2","id":2},{"value":"Category 1","id":1}]

Although it seems very complicated but in fact, have a key and the value. Take a look search.aspx.cs code if you want ;

protected void Page_Load(object sender, EventArgs e)
    {
        string strTerm = Request.QueryString["term"];//sql injection, this value do not forget to check!
        string strTemp="[";
        DataTable dt = db.DTGetir("Select * from category where name like '%" + Request.QueryString["term"] + "%' order by id desc");
        foreach (DataRow item in dt.Rows)
        {
            strTemp += "{\"value\":\""+item["name"]+"\",\"id\":"+item["id"]+"},";
        }
        strTemp = strTemp.Substring(0,strTemp.Length-1)+"]";

        if (dt.Rows.Count == 0)
        {
            strTemp = "[\"no record\"]";
        }
        Response.Write(strTemp);
    }

default.aspx page

	<script type="text/javascript">
	$(function() {
		function log(message) {
			$("<div/>").text(message).prependTo("#log");
			$("#log").attr("scrollTop", 0);
		}

		$("#birds").autocomplete({
			source: "search.aspx",
			minLength: 2,
			select: function(event, ui) {
				log(ui.item ? ("Selected value: " + ui.item.value + " Id " + ui.item.id) : "Nothing selected, input was " + this.value);
			}
		});
	});
	</script>
    <div class="demo">
        <div class="ui-widget">
	        <label for="birds">Birds: </label>
	        <input id="birds" />
        </div>
        <div class="ui-widget" style="margin-top:2em; font-family:Arial">
	        Result:
	        <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
        </div>
    </div>

do not forget to add jQuery, jQuery UI and style to our project files

    <link href=".js/ui-Themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>

That’s it, come easily to everyone;)

Tagged with: Asp.Net • autocomplete • jquery • jquery ui • json • search • use