Resalte las tags que no están disponibles en la lista

Estoy usando jQuery UI widget Tagit en Asp.net . El código funciona bien pero quiero resaltar las tags que no están disponibles en la lista.

si mis tags son

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

y estoy usando cualquier otra palabra que no esté disponible en sampleTags cómo resalto estas tags con otro color.

Estoy usando el siguiente código

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); } }); }); 

Código 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(); 

Por favor ayúdame a hacer esto. Gracias de antemano.

Use el evento beforeTagAdded y compare las tags agregadas a sampleTags ,

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

Demo Fiddle


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