0

これが何と呼ばれているのかわからないので、どこから始めればよいかわかりません。皆さんが私を正しい方向に向けることができることを願っています. 私はこのようなものを作成しようとしています:

入力タグ

ユーザーが何かを入力してカンマで区切ると、このフォーム フィールドへの入力が小さなタグのようなボックスに変わり、x で削除できるという考えです。

どこから始めるべきかについてのアイデアはありますか?

ありがとう！

4

4 に答える 4

1

簡単な例を次に示します: http://jsfiddle.net/9tzb4/

HTML:

<form>
  Tags:
  <div class="tag_field">
    <input type="text">  
    <input type="hidden" name="tags">
  </div>

  <br>
  <input type="submit" value="Submit">
</form>

CSS:

.tag_buttons {
  position: absolute;  
}

.tag_buttons div {
  display:inline-block;
  margin: 2px;
  border: 1px solid #666;
  padding: 1px;
}

.tag_field input[type=text] {
  padding: 5px;
  width: 300px;
  border: 1px solid #666;

}

JavaScript:

$(".tag_field").each(function() {
  var buttons = $("<div/>");
  var input = $(this).find("input[type=text]");
  var output = $(this).find("input[type=hidden]");

  var update_padding = function() {
    input.css("padding-left", buttons.width() + 2);
  };       
  setInterval(update_padding, 300);

  $(this).prepend(buttons);
  buttons.addClass("tag_buttons");
  buttons.css({ left: input.offset().left + 1,
                top: input.offset().top + 2 });
  input.bind("keyup change paste", function() {
    var i = input.val().indexOf(",");
    if (i >= 0) {
      var new_tag = input.val().substr(0, i);
      input.val(input.val().substr(i+1));
      buttons.append("<div id='button'><span class='value'>"+new_tag+"</span> <span class='close'>(x)</span></div>");
    }
  });

  var form = $(this).closest("form");
  if (form.length > 0) {
    form.submit(function() {
      var v = [];
      form.find(".tag_buttons div").each(function() {
        v.push($(this).find(".value").html());      
      });

      output.val(v.join(","));
      return false;
    });          
  }

});
$(document).on("click", ".tag_buttons span.close", {}, function(e) {
  $(e.target).closest("div").detach();      
});
于 2012-07-08T18:47:15.013 に答える
1

とりわけ、あなたが探しているものを正確に実行する驚くべきjQuery selectedをチェックしてください。

select2は同様のプラグインで、独自のタグを追加することもできます (AJAX ソースを使用することもできます)。

select2ドキュメントからの更新:

タグ付けが有効になっている場合、ユーザーは既存のタグから選択するか、ユーザーがこれまでに検索ボックスに入力した最初の選択肢を選択して新しいタグを作成できます。

于 2012-07-08T18:20:30.640 に答える
1

これをチェックしてください。http://davidwalsh.name/dw-content/jquery-chosen.phpこれは、あなたのアプリケーションに完全に適合すると私が推測するものです。

于 2012-07-08T18:21:45.323 に答える
0

jQuery タグ入力ライブラリが役立つ場合があります。それはあなたにこのようなものを与えます

ここに画像の説明を入力

于 2012-07-09T08:43:46.303 に答える