<link rel="stylesheet" type="text/css" href="~/lib/jquery.tagsinput.jurgenscope/jquery.tagsinput.css" />
<link rel="stylesheet" type="text/css" href="~/lib/jquery-ui/themes/ui-lightness/jquery-ui.min.css" />
<script type="text/javascript" charset="utf-8" src="~/lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/jquery.tagsinput.jurgenscope/jquery.tagsinput.js"></script>
<script type="text/javascript"> $(function () { $('#Employees').tagsInput({ 'autocomplete_url': 'http://www,xxx,cin/AutoComplete', 'height': '60px', //设置高度 'width': '400px', //设置宽度 'defaultText': '添加被投诉人', 'removeWithBackspace': false,//禁止退格删除 onAddTag: function (tag) { //alert('增加了' + tag) }, onRemoveTag: function (tag) { //alert('删除了' + tag) } }); }) </script>
要使用autocomplete_url 必须 引入jquery.ui
<link rel="stylesheet" type="text/css" href="~/lib/jquery-ui/themes/ui-lightness/jquery-ui.min.css" />
<script type="text/javascript" charset="utf-8" src="~/lib/jquery-ui/jquery-ui.min.js"></script>
该链接在模糊查询时会自动提交 term 参数
后台接收函数例子如下:
public async Task<ActionResult> AutoComplete(string term = "") { var list = await elyService.GetListAsync(0, Predicates.Field<Employee>(a => a.RealName, Operator.Like, "%" + term + "%")); List<Object> models = new List<Object>(); foreach (var model in list) { models.Add(new { label = model.RealName, value = model.Id + "." + model.RealName }); } return Json(models); }
更多精彩文章请关注我们的微信公众号FocusDotCore: