0

私は基本的に、ユーザーが「最近の検索タグ」をクリックして検索入力に完全に追加できるようにしようとしています。「完全に」とは、タグのスタイルとテキストのことです。

例えば：

最近の検索タグをクリックすると、検索に追加されます。

これにはjqueryプラグインがあることを知っています。しかし、これを実現するための簡単なアプローチがあるかどうかを知りたかったのです。

私はjsfiddleを持っています。現在、最近の検索タグをクリックすると、各 div のテキストが一度に 1 つずつ取得されます。

$('.tag').click(function(e){
     var tag = $(this).children().html();
     $('input').val(tag);
     e.preventDefault();
});

どんな助けでも大歓迎です。ありがとう！

4

2 に答える 2

1

スタイル付きタグを入力の下に配置することで、入力ボックスの「中に」表示するスタイルのタグを取得できます (透過背景付き) (Google がオートコンプリート機能で行うのと同様)。

入力の周りにいくつかのマークアップを設定します (入力ラッパーとタグのコンテナー):

<div class="input-group">
    <div class="tag tag-input"></div>
    <input name="q" id="search" class="input-text" multiple="multiple" placeholder="Search..." autocomplete="on" value="" />
</div>

tag-inputをテキストのインラインになるように配置し、 をより広く設定してinput、word-spacingタグが等間隔になるようにします。tag-input z-index入力より低く設定してください。ユーザーが長いクエリを入力すると、入力幅も調整されます。

jsfiddle (フルスクリーン)

これは、最新のブラウザーで機能するoninputイベント (ala ) を使用します (詳細については、 On input change イベント?を参照してください) 。$input.bind('input'...

于 2012-10-25T19:57:37.070 に答える
0 
$('.tag').click(function(e){
    var tag = $(this).children().html();
    $('input').val(function(i,v){return v+" "+tag});
    e.preventDefault();
});

タグを置き換える代わりに追加します。

于 2012-10-25T19:06:24.593 に答える