
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