高亮标记而不可用到列表 [英] Highlight tags which is not available into the list

问题描述

我使用jQuery UI部件 Tagit 在 Asp.net 。代码工作正常，但我想强调这是不可进入名单的标签。

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.

如果我的标签

VAR sampleTags = ['C ++，Java的'，'PHP'，'ColdFusion的'，'的javascript']

和我使用的任何其他文字而无法使用到 sampleTags 如何突出这些标签与其他颜色。

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

我使用下面的代码

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代码： -

 [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();

请帮我做this.Thanks提前。

Please help me to do this.Thanks in advance.

推荐答案

使用的 beforeTagAdded 事件，并比较加入 sampleTags ，

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

这篇关于高亮标记而不可用到列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！