Examples of jquery. tagsinput, including fuzzy query of backend code,
<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 ', // set the height 'width ': '400p', // set the width 'defaulttext': 'add respondent ', 'removewithbackspace': false, // disable unggle deletion of onAddTag: function (tag) {// alert ('added '+ tag)}, onRemoveTag: function (tag) {// alert ('deleted' + tag )}});}) </script>
Jquery. ui must be introduced to use autocomplete_url
<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>
The link automatically submits the term parameter during fuzzy search.
An example of the background receiving function is as follows:
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);}