Autocomplete from db to textbox in MVC

Question

Hi,

I am facing problem in implementing autocomplete from database to textbox in my MVC application.

I have a text box (which is added dynamically to the HTMLview) ,and while clicking on it to enter data, I want it to show the possible values from db to autocomplete it.

 The code in view is:

<input type="text" id="SupplierName" name="SupplierName" style="width:100px;" />

and the javascript is:

 

$('#SupplierName').autocomplete({

source: '@Url.Action("AutoCompleteSupplier", "Quote")'

});

and the Controller Action Method is:

 

 

public JsonResult AutoCompleteSupplier(string term)

{

var result = (from r in db.SupplierMasters

where r.SupplierName.ToLower().Contains(term.ToLower())

select new { r.SupplierName }).Distinct();

//var productNames = (from p in mhgDb.Products where p.ProductName.Contains(q) select p.ProductName).Distinct

return Json(result, JsonRequestBehavior.AllowGet);

}

and it is not working. Please help...after implementing this only I can move forward...please... 

Thanks in advance.

Also I have included the following references, and I am not sure, which all are required for this.

@Scripts.Render("~/bundles/jqueryval")

@Scripts.Render("~/bundles/jquery")

@* @Scripts.Render("~/bundles/jqueryui")*@

@Styles.Render("~/Content/themes/base/css")

@Scripts.Render("~/bundles/jqueryui")

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>

<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Scripts/jquery.autocomplete.css")" rel="stylesheet" type="text/css" />

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>

@*<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>*@

<link rel="stylesheet" href="/resources/demos/style.css">

 Thanks in advance.