For creating autocomplete
multiple select using the jquery UI plugin.
<link
rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<label>Search fruits:</label>
<input
type="text" id="txtFruits" name="txtFruits" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#txtFruits")
.on("keydown", function (event) {
if (event.keyCode ===
$.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.autocomplete({
source: function (request, response) {
$.getJSON('@Url.Action("data")', {
term:
extractLast(request.term)
}, response);
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the
comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
})
</script>
/// <summary>
/// Inside the controller
/// Don't change the parameter
name (term) it's default by jquery ui
/// </summary>
public ActionResult
data(string term)
{
var
items = new[] { "Apple", "Pear", "Banana", "Pineapple", "Peach" };
var
filteredItems = items.Where(item => item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase)
>= 0 );
return Json(filteredItems, JsonRequestBehavior.AllowGet);
}
