Question

我正在使用

jQuery Tag-it!

在输入字段中制作标记，但在输入字段中添加标记后，我想从输入字段中检索标签和值，

html代码是：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="Scripts/tag-it.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css"/>
    <link href="Content/jquery.tagit.css" rel="stylesheet" />
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery("#mytags").tagit({
                tagSource: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: "WebForm1.aspx/GetKeyword",
                        data: "{'match': '" + request.term + "'}",
                        dataType: "json",
                        contentType: "application/json",
                        success: function (data) {
                            if (data.d != null) {
                                response($.map(data.d, function (item) {
                                    return {
                                        label: item.Name,
                                        Value: item.Id
                                    }
                                }));
                            }
                        }
                    });
                }
            });
        });
        function myfunction() {
            var tagStr = $("#mytags").tagit("tags")
            alert("Got tags: " + tagStr);
            $('#hiddenTags').val(tagStr);
            return false;
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div>
        TO :
    </div>
        <ul id="mytags">
    </div>
        <asp:Button ID="Button1" runat="server" Text="Send" OnClick="Unnamed1_Click" OnClientClick="myfunction();"/>
    </form>
</body>
</html>

和C＃代码是：

public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static List<Info> GetKeyword(string match)
        {
            var qry = GetInfo().Distinct().Where(k => k.Name.ToLower().StartsWith(match.ToLower()));
            return qry.ToList();
        }

        public static IEnumerable<Info> GetInfo()
        {
            List<Info> list = new List<Info>();
            list.Add(new Info { Id = 1, Name = "Tom", Email = "Tom@Email.com" });
            list.Add(new Info { Id = 2, Name = "Torex", Email = "Torex@Email.com" });
            list.Add(new Info { Id = 3, Name = "Tresa", Email = "Tresa@Email.com" });
            list.Add(new Info { Id = 4, Name = "Morgan", Email = "Morgan@Email.com" });
            list.Add(new Info { Id = 5, Name = "Paris", Email = "Paris@Email.com" });
            list.Add(new Info { Id = 6, Name = "Patrick", Email = "Patrick@Email.com" });
            return list;
        }

        protected void Unnamed1_Click(object sender, EventArgs e)
        {

        }
    }
    public class Info
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public String Email { get; set; }
    }

当我点击按钮获取标签值时： enter image description here

我期望从发送按钮获取值的是：摩根，汤姆，帕特里克与“id”

Answer 1

尝试控制日志以检查对象内部的内容，也许它是一个数组，在这种情况下使用.each。

console.log("Got tags: " + tagStr);

Answer 2

在ajax请求value事件处理程序中修复success属性拼写并使用它：

var tagStr = JSON.stringify($("#mytags").tagit("tags"));

并检查您发布和使用的插件链接的来源。

Answer 3

修复您的代码：

html代码是：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="DemoTagit._default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery-ui-base-1.8.20.css" rel="stylesheet" type="text/css" />
    <link href="css/tagit-dark-grey.css" rel="stylesheet" type="text/css" />
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.1.8.20.min.js" type="text/javascript"></script>
    <script src="js/tagit.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            jQuery("#demo2").tagit({
                tagSource: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: "default.aspx/GetKeyword",
                        data: "{'match': '" + request.term + "'}",
                        dataType: "json",
                        contentType: "application/json",
                        success: function (data) {
                            if (data.d != null) {
                                response($.map(data.d, function (item) {
                                    return {
                                        label: item.Name,
                                        value: item.Id
                                    }
                                }));
                            }
                        }
                    });
                },
                sortable: true,
                triggerKeys: ['enter', 'comma', 'tab']
            });

            $('#demo2GetTags').click(function () {
                showTags($('#demo2').tagit('tags'))
            });

            function showTags(tags) {
                console.log(tags);
                var string = "Tags (label : value)\r\n";
                string += "--------\r\n";
                for (var i in tags)
                    string += tags[i].label + " : " + tags[i].value + "\r\n";
                alert(string);
            }

            $('#demo2ResetTags').click(function () {
                $('#demo2').tagit('reset')
            });
        });
  </script>
</head>
<body>
    <div class="box">
        <div class="note">
            You can manually specify tags in your markup by adding <em>list items</em> to the
            unordered list!
        </div>
        <ul id="demo2" data-name="demo2">
        </ul>
        <div class="buttons">
            <button id="demo2GetTags" value="Get Tags">
                Get Tags</button>
            <button id="demo2ResetTags" value="Reset Tags">
                Reset Tags</button>
        </div>
    </div>
</body>
</html>

背后的代码是：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Services;

namespace DemoTagit
{
    public class Info
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public String Email { get; set; }
    }

    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        [WebMethod]
        public static List<Info> GetKeyword(string match)
        {
            var qry = GetInfo().Distinct().Where(k => k.Name.ToLower().StartsWith(match.ToLower()));
            return qry.ToList();
        }

        public static IEnumerable<Info> GetInfo()
        {
            List<Info> list = new List<Info>();
            list.Add(new Info { Id = 1, Name = "Tom", Email = "Tom@Email.com" });
            list.Add(new Info { Id = 2, Name = "Torex", Email = "Torex@Email.com" });
            list.Add(new Info { Id = 3, Name = "Tresa", Email = "Tresa@Email.com" });
            list.Add(new Info { Id = 4, Name = "Morgan", Email = "Morgan@Email.com" });
            list.Add(new Info { Id = 5, Name = "Paris", Email = "Paris@Email.com" });
            list.Add(new Info { Id = 6, Name = "Patrick", Email = "Patrick@Email.com" });
            return list;
        }

    }
}

祝你好运！ HungNM

无法从“jQuery Tag-it！”中获取标签

3 个答案: