Highlight tags which is not available into the list

问题

I am using jQuery UI widget Tagit in Asp.net. Code is working fine but i want to highlight the tags which is not available into the list.

if my tags are

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

and i am using any other word which is not available into sampleTags how do i highlight these tags with other color.

I am using the following code

JS:-

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link href="../CSS/jquery.tagit.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
          <script src="../JavaScript/tag-it.js"></script>
        <link href="../CSS/tagit.ui-zendesk.css" rel="stylesheet" />
    <script>
    $(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 code :-

 [WebMethod]
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public static string[] GetKeywords()
    {
        List<string> lst = new List<string>();
        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();

Please help me to do this.Thanks in advance.

回答1:

Use beforeTagAdded event and compare the tags added to 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')
        }
    }
});

来源：https://stackoverflow.com/questions/30345573/highlight-tags-which-is-not-available-into-the-list

标签

jquery

ASP.NET

tag-it