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

posted @ 2017-08-18 16:44  tianfeng.cc  阅读(658)  评论(0编辑  收藏  举报