Thumb

Autocomplete Textbox In MVC | With Database | Jquery Ajax ⋆⋆⋆


7/21/2017 12:00:00 AM

 

Step 1 : Create A Database Table (Country)

Step 2 : Click On Visual Studio Create A New Project (AutocompleteDemo)

Step 3 : Connect Your Database(Using EntityFramework Like As Video).

Step 4 : Create A Controller  (Or Use Default Home Controller ) And Write Down The Below Code In Your Controller.

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetSearchValue(string search)
        {
            MVCTutorialEntities db = new MVCTutorialEntities();
            List<CountryModel> allsearch = db.Countries.Where(x => x.Name.Contains(search)).Select(x => new CountryModel
            {
                Id = x.Id,
                Name = x.Name
            }).ToList();
            return new JsonResult { Data = allsearch, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
       
    }

Step 5: Add View (Or Use Default Home Controller Like As Video) And WriteDown The Below Code In Your View

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
    <label>Country Search</label>
    <input class="form-control" id="searchInput" />
</div>
<script>
    $("#searchInput").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetSearchValue","Home")',
                dataType: "json",
                data: { search: $("#searchInput").val() },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.Name, value: item.Name };
                    }));
                },
                error: function (xhr, status, error) {
                    alert("Error");
                }
            });
        }
    });
</script>

Now Run This Project

About Teacher

Reza Karim

Software Engineer

More about him