Auto complete search textbox like google in a simple & easy way.

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width" />
    <title>AutoComplete Box with jQuery</title>
    <link href="" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <div class="demo">
        <div class="ui-widget">
            <label for="tbAuto">Enter UserName: </label>
            <input type="text" id="txtSearch" class="autosuggest" style="width:300px;" />

Place the script in head tag

<script type="text/javascript">
        $(document).ready(function () {
        function SearchText() {
                source: function (request, response) {
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "/Home/GetAutoCompleteData",
                        data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
                        dataType: "json",
                        success: function (data) {
                        error: function (result) {
    public class HomeController : Controller
        // GET: /Home/
        public ActionResult Index()
            return View();

        public ActionResult GetAutoCompleteData(string username)

            List<string> result = new List<string>();

            return Json(new { d = result }, JsonRequestBehavior.AllowGet);

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s