你的位置:首页 > Java教程

[Java教程]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);}