Question

以下是我目前拥有的实时示例：https://dl.dropboxusercontent.com/u/11126587/input%20Tag%20Creation/tag.html

我想要的是，如果我点击“+添加另一段”文本，它将创建具有相同标签效果的相同输入框与当前现有的一样（您可以编写Something并按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>

+添加另一个细分

我发现这个标签效果来自某人博客但是我想通过点击创建新细分来扩展它。此外，我不习惯使用js Fiddle所以我从我的Drop Box中提供了示例链接。

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

提前致谢

Answer 1

这样的事情？

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

单击以使用jquery或javascript打开新段

1 个答案: