javascript - カンマで区切られたタグの入力フィールド

Question

ユーザーがタグでコンテンツを投稿できるようにするWebアプリケーションに取り組んでいますが、タグがコンマで区切られていて、テキストフィールドの値がビューだけで同じである場合、タグの周りに素敵なブロックを作成するにはどうすればよいですか?ユーザーは異なるでしょう。

例としては YouTube や StackOverflow などがありますが、今のところ、データベースなどをチェックする必要はありません。

ありがとう！

Answer 1

スタック オーバーフローのようなもの:

• 英数字と+-.# (そして空白を削除します!)
• 小文字に変換
• focusOut でタグ ボックスを自動的に作成しますEnter , (さらに|区切られたキーコードを追加します)。
• クリック時にタグ ボックスを削除 (確認あり)

$(function(){ // DOM ready

  // ::: TAGS BOX

  $("#tags input").on({
    focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
      this.value = "";
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('#tags').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
  });

});

#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags > span{
  cursor:pointer;
  display:block;
  float:left;
  color:#fff;
  background:#789;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags > span:hover{
  opacity:0.7;
}
#tags > span:after{
 position:absolute;
 content:"×";
 border:1px solid;
 padding:2px 5px;
 margin-left:3px;
 font-size:11px;
}
#tags > input{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tags">
  <span>php</span>
  <span>c++</span>
  <span>jquery</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>

Answer 2

ここで一からやり直す必要はありません。この目的のための多くのライブラリ/プラグインがすでに存在し、そのうちの 1 つが Guillermo Rauch のTextboxListです。ここでデモンストレーションを見つけることができます。すでにオートコンプリートのサポートとかなり広範な API を備えています。これが、これを実装する上での主要なハードルになります。

元の実装では MooTools を使用していましたが、golive で jQuery バージョンを見つけることができます。

Answer 3

テキスト入力を div 内に配置し、キープレス (コンマまたはスペース キーなど) をチェックします。キーと一致する場合は、タグの詳細を含む新しいスパンを jQuery を使用して div に追加します。

必要に応じて詳細や例を提供できますが、コーディングはかなり簡単です。