7

stackoverflowでは、投稿を行うときにテキストボックス「タグ」が表示されます。

単語とスペースを入力すると、タグになります。タグになった後、単語から文字を削除しますが、X画像をクリックすると単語自体を削除できます。

タグ用の同様のテキストボックスを作成したいと思います。stackoverflowには、このテキストボックスに関連付けられた自動提案もありますが、それは必要ありません。

ヘルプ/リンクをいただければ幸いです

4

2 に答える 2

8

これらのホスト全体がオンラインにあります。私はグーグルを使っている人をとても簡単に見つけました。たとえば、これをチェックしてください。

http://xoxco.com/projects/code/tagsinput/

于 2012-11-14T17:09:23.047 に答える
6

編集：これはわずかに異なる（より良い）機能を備えた同様の例です：
https ：//stackoverflow.com/a/14083331/383904

簡単にアップグレードおよび変更できる素敵な小さなデモ：

$('#tags input').on('focusout',function(){    
  var txt = $.trim( this.value );
  if(txt) {
    $(this).before('<span class="tag">'+txt+'</span>');
  }
  this.value = "";  
});


$('#tags').on('click','.tag',function(){
  if( confirm("Really delete this tag?") ) $(this).remove();
});
#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags span.tag{
  display:block;
  float:left;
  color:#fff;
  background:#689;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags span.tag:after{
  position:absolute;
  content:"x";
  border:1px solid;
  padding:0 4px;
  margin:3px 0 10px 5px;
  cursor:pointer;
  font-size:10px;
}
#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">
  <input type="text" value="" placeholder="Add a tag" />
</div>

于 2012-11-14T17:34:28.900 に答える