0

这是我现在拥有的实时示例：https ://dl.dropboxusercontent.com/u/11126587/input%20Tag%20Creation/tag.html

我想要的是，如果我单击“+ 添加另一个段”文本，它将创建具有相同标签效果的相同输入框，就像现在拥有的一样（您可以写一些东西并按 Enter 键查看标签效果）。

HTML

<html>
<head>
<meta charset="utf-8">
<title>
Input Tag
</title>
<link rel="StyleSheet" href="css/jquery.tagedit.css" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.autoGrowInput.js"></script>
<script type="text/javascript" src="js/jquery.tagedit.js"></script>
<script type="text/javascript">
$(function() {  
    // Empty List
    $( '#empty-list input.tag' ).tagedit({
        autocompleteURL: 'server/autocomplete.php'
    });

    // Edit only
    $( '#brackets input.tag').tagedit({
        autocompleteURL: 'server/autocomplete.php'
    });

    // Arrow List
    $( '#arrow input.tag' ).tagedit({
        autocompleteURL: 'server/autocomplete.php',
        autocompleteOptions: {minLength: 0}
    });

    // Custom Break Characters
    $('#custom-break input.tag').tagedit({
        autocompleteURL: 'server/autocomplete.php',
        // return, comma, space, period, semicolon
        breakKeyCodes: [ 13, 44, 32, 46, 59 ]
    });

    // Local Source
    var localJSON = [
        { "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
        { "id": "2", "label": "Common Quail",   "value": "Common Quail" },
        { "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" }
    ];              
    $('#local-source input.tag').tagedit({
        autocompleteOptions: {
            source: localJSON
        }
    });
    $('#local-source2 input.tag').tagedit({
        autocompleteOptions: {
            source: localJSON
        }
    });
    $('#local-source3 input.tag').tagedit({
        autocompleteOptions: {
            source: localJSON
        }
    });

    // Function Source
    $('#function-source input.tag').tagedit({
        autocompleteOptions: {
            source: function(request, response){
                var data = [
                    { "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
                    { "id": "2", "label": "Common Quail",   "value": "Common Quail" },
                    { "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" },
                    { "id": "4", "label": "Merlin", "value": "Merlin" },
                ];              
                return response($.ui.autocomplete.filter(data, request.term) );
            }
        }
    }); 
});
</script>
</head>

<body>
<p id="local-source" style="padding:0px; margin:0px;">
        <input type="text" name="tag[]" value="" class="tag"/>
</p>
+ 添加另一个细分

我从某人的博客中找到了这个标签Effect 但我想用 Click to Create New Segment 扩展它。另外我不习惯使用 js Fiddle 所以我给出了来自我的 Drop Box 的示例链接。

如果有人能做到这一点，那就太好了。如果我的发布格式有任何错误，请告诉我是否可以帮助您发布或提供更多信息。

提前致谢

4

1 回答 1

0

像这样的东西？？

<p id="local-source">
    <input type="text" class="tag"/>
</p>
<div id="add">
    + Add Another Segment
</div>

$(document).ready(function() {
   $('#add').on('click', function() {
      var input = '<input type="text" class="tag"/>';
       $(input).appendTo($('#local-source'));
   });
});
于 2013-05-13T16:24:56.460 回答