jquery.tagsinput的使用例子，包括模糊查询后端代码

<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：