2

我一直在使用https://github.com/aehlke/tag-it中的 tag-it 插件（演示 - http://aehlke.github.com/tag-it/examples.html）。

在此代码中，有一个选项可以在另一个输入、textarea 等中显示输入的标签。第一个选项 -

        $('#singleFieldTags').tagit({
            availableTags: sampleTags,

            singleField: true,
            singleFieldNode: $('#mySingleField')
        });

这里的 id -#singleFieldTags是输入字段，它是一个类似列表的列表，<ul而 id -#mySingleField显示“列表排序”标签，每个标签之间都有逗号。

中添加和删除的所有标签都#singleFieldTags出现在#mySingleField. 由于 tag-it 没有内置的可排序功能，因此添加 asortable()以更改 中的标签顺序#singleFieldTags，不会更改 中的标签顺序#mySingleField。

第二个选项是简单的，只有#singleFieldTags以下内容：-

        $('#singleFieldTags').tagit({
            availableTags: sampleTags,
        });

虽然在 tag-it.js 中有一个 ，但在提交 php 表单后，该值不会出现在 mysql 表中，因为上面的标签列表放在<li></li>.

如何使标签可排序并确保列表字段中相同的标签排列<ul显示在<textarea第一个选项中？或者如何在单个字段中对标签进行排序<input并使其能够通过表单提交？

编辑：这里有一个类似 Tag-it 的插件，称为 tagit：http ://webspirited.com/tagit/ 。如果标签被交换，这个插件有一个输入框的可排序，当在表单上提交时，它会按排序顺序出现。但是，缺点是它具有自定义的主题滚轮主题，这些主题并不相似，甚至无法链接到 jQuery UI (jqueryui.com) 上的主题。

但另一方面，tag-it 插件（不是 tagit）可以加载这些主题，但不提供可排序功能。

4

1 回答 1

4

这是一个使用 tag-it 插件的解决方案，因为我知道您的报价中解释了您缺少的功能“ ...添加一个 sortable() 以更改 #singleFieldTags 中的标签顺序，不会更改标签的顺序#mySingleField “。

为了让“#mySingleField”反映新的排序顺序，我在 sortable() 的停止事件中添加了一个处理程序：

$('#singleFieldTags').sortable({
    stop: function(event,ui) {
        $('#mySingleField').val(
            $(".tagit-label",$(this))
                .clone()
                .text(function(index,text){ return (index == 0) ? text : "," + text; })
                .text()
        );
    }
});

和

$('#singleFieldTags2').siblings(".tagit").sortable({
    stop: function(event,ui) {
        $('#singleFieldTags2').val(
            $(".tagit-label",$(this))
                .clone()
                .text(function(index,text){ return (index == 0) ? text : "," + text; })
                .text()
        );
        console.log( $('#singleFieldTags2').val() );        // just for reference
    }
});

这是一个演示功能的 jsfiddle （为单个输入字段添加的功能）

于 2013-02-10T13:00:41.840 回答