突出显示列表中不可用的标记

我在Asp.net使用jQuery UI小部件Tagit 。 代码工作正常，但我想突出显示列表中没有的标记。

如果我的标签是

var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript']

我正在使用sampleTags没有的任何其他单词如何用其他颜色突出显示这些标签。

我使用以下代码

JS： –

        $(function () { $.ajax({ url: 'UpdateSingImgKwds.aspx/GetKeywords', type: 'GET', datatype: "json", contentType: "application/json; charset=utf-8", success: function (res) { $('#singleFieldTags').tagit({ caseSensitive: false, availableTags: res.d, allowSpaces: true, singleField: true, singleFieldNode: $('#txtCompKwds'), beforeTagAdded: function (event, ui) { if ((res.d).indexOf(ui.tagLabel.toLowerCase()) == -1) { $(ui.tag).css('background', '#fff1b5') } } }); }, failure: function (err) { alert(err); } }); }); 

CS代码： –

  [WebMethod] [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] public static string[] GetKeywords() { List lst = new List(); string queryString = "select * from KWD_Library ORDER BY Keyword asc"; using (SqlConnection connection = new SqlConnection(ConfigurationManager.AppSettings["vConnString"].ToString())) { using (SqlCommand command = new SqlCommand(queryString, connection)) { connection.Open(); using (SqlDataReader reader = command.ExecuteReader()) { while (reader.Read()) { lst.Add(reader["Keyword"].ToString()); } } } } return lst.ToArray(); 

请帮我这样做。谢谢。

Answer 1

使用beforeTagAdded事件并比较添加到sampleTags的标签，

 beforeTagAdded: function (event, ui) { if ($.inArray(ui.tagLabel,sampleTags) == -1) { $(ui.tag).css('background', 'red') //you can use `addClass()` here instead of .css() } } 

演示小提琴

---

 $("#singleFieldTags").tagit({ availableTags: sampleTags, beforeTagAdded: function (event, ui) { if ($.inArray(ui.tagLabel,sampleTags) == -1) { $(ui.tag).css('background', 'red') } } });