Question

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

如果我的标签是

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

我正在使用sampleTags中无法使用的任何其他单词。如何使用其他颜色突出显示这些标记。

我正在使用以下代码

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

请帮我这样做。谢谢。

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

<强> Demo Fiddle

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

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

1 个答案: