jQuery UI is a plug-in for jQuery
To use a different theme, ensure the CSS and image files are present in the Content directory
To use jquery UI:
1. Add link in CSS
<link href=”@Url.Content(“~/Content/themes/base/jquery-ui.css)” type=../>
additional theme go into Content/themes folder
This link can be changed based on user’s preferred theme
2. At the bottom of page add minified version of jQueryUI
..
@Content.Script(“jquery-ui.min.js”, Url)
@RenderSection(“scripts”, false)
To implement AutoComplete
1) Add a new js file to Contents\Scripts folder
2) Add the link to the script at the bottom
3) In the script editor, drag the following to the file editor:
/// reference path=”jquery-1.4.4-vsdoc.js” />
/// reference path=”jquery-ui.js” />
Tells VS that we are using these and VS provide intellisense. Does not include the scripts.
$(document).ready(function() // once DOM model is loaded
{
// identify the element that needs autocomplete behavior
// and how to the get the data for the autocomplete
$(“”).autocomplete();
}
)
In the html, add a class attribute to the element:
<input type=”text” name=”q” class=”autocomplete” /> // q is fashionable name to use for search query
$(document).ready(function() // once DOM model is loaded
{
// identify the element that needs autocomplete behavior
// and how to the get the data for the autocomplete using the class name
$(“autocomplete”).autocomplete();
}
)
can also use data- attrib
<input type=”text” name=”q” data-autoComplete=”@Url.ACtion(“QuickSearch, Home” />
$(document).ready(function() // once DOM model is loaded
{
// identify the element that needs autocomplete behavior
// and how to the get the data for the autocomplete using the class name
// wire-up autocomplete behavior each input that has data-autocomplete
// attribute using the Url provided in data-autocomplete
$(“:input[data-autocomplete]”).each(
function() {
$(this).autocomplete( { source : $(this).attr(“data-autocomplete”)});
});
Now need Controller action that will respond to controller action:
public ActionResult QuickSearch(string term)
{
var restaurants = _db.Restaurants
.Where (r => r.Name.Contains(term))
.Take(10)
.Select (r => new {label = r.Name });
return Json(restaurants, JsonRequestBehavior.AllowGet);
}
Autocomplete doc says it will send a term parameter
Autocomplete expects data in Json format
Further, it expects “label”, name pairs
