8

フリーテキストが許可された複数行のテキストボックスが必要ですが、入力文字「@@」を開始する
と、使用可能なタグを含むオートコンプリートボックスが表示され、既存のタグと「@@」文字からタグを選択できるようになりますタグ名に含まれてはなりません。

現在、jquery UIの tag-it プラグインで遊んでいますが、フリー テキストを許可する方法がわかりません。「@@」入力時にオートコンプリート ボックスのみを表示します。通常の入力の代わりにテキストエリアを使用する方法。

また、@@ を入力し、自由なテキストの入力を許可しない場合は、強制的にリストから選択するようにしたいと思います (最初に利用可能な選択が適切です)
Javascript: 

$(document).ready(function() {

  //The demo tag array
  var availableTags = [
    {value: 1, label: 'tag1'},
    {value: 2, label: 'tag2'},
    {value: 3, label: 'tag3'}];

  //The text input
  var input = $("input#text");

  //The tagit list
  var instance = $("<ul class=\"tags\"></ul>");

  //Store the current tags
  //Note: the tags here can be split by any of the trigger keys
  //      as tagit will split on the trigger keys anything passed  
  var currentTags = input.val();

  //Hide the input and append tagit to the dom
  input.hide().after(instance);

  //Initialize tagit
  instance.tagit({
    tagSource:availableTags,
    tagsChanged:function () {

      //Get the tags            
      var tags = instance.tagit('tags');
      var tagString = [];

      //Pull out only value
      for (var i in tags){
        tagString.push(tags[i].value);
      }

      //Put the tags into the input, joint by a ','
      input.val(tagString.join(','));
    }
  });

  //Add pre-loaded tags to tagit
  instance.tagit('add', currentTags);
});

html: 

<p>This example shows how to use Tagit on an input!</p>
<input type="text" id="text" name="tags" value="one,two,three"/>
​

ここでのテスト: http://jsfiddle.net/hailwood/u8zj5/

4

2 に答える 2

4

tag-itプラグインを使用していたので..処理するために入力にハンドラーを追加しました

  1. @@入力時にオートコンプリートを表示する
  2. なしで入力した場合のフリーテキスト@@

@@ が入力された場合はフリー テキストを許可しないでください

デモ: http://jsfiddle.net/xBgfJ/2/以下は完全なコードです。

注:以下のコードは、既存のプラグイン コードを微調整したものです。

$(document).ready(function() {

    //The demo tag array
    var availableTags = [{value: 1, label: 'tag1'},{ value: 2,label: 'tag2'}, { value: 3, label: 'tag3'}];

    //The text input
    var input = $("input#text");

    //The tagit list
    var instance = $("<ul class=\"tags\"></ul>");

    //Store the current tags
    //Note: the tags here can be split by any of the trigger keys
    //      as tagit will split on the trigger keys anything passed  
    var currentTags = input.val();

    //Hide the input and append tagit to the dom
    input.hide().after(instance);

    //Initialize tagit
    instance.tagit({
        tagSource: availableTags,
        tagsChanged: function() {

            //Get the tags            
            var tags = instance.tagit('tags');
            var tagString = [];

            //Pull out only value
            for (var i in tags) {
                tagString.push(tags[i].value);
            }

            //Put the tags into the input, joint by a ','
            input.val(tagString.join(','));
        },
        onTagAdded: function() {
            inpNext.parent().find('.pre-filter').remove();
        }
    });

    //Add pre-loaded tags to tagit
    instance.tagit('add', currentTags);

    var inpNext = input.next();
    var autoCompelteMenu = $('.ui-autocomplete', inpNext);

    inpNext.on('keydown', '.tagit-input', function(e) {
        var $parent = $(this).parent();
        var $preFilter = $parent.find('.pre-filter');
        if (e.which == 8 && this.value == '') { //backspace           
            $preFilter.remove();
        } else if (e.which == 9 || e.which == 32
                  || e.which == 188 || e.which ==  44 ||
                  e.which == 13 ) { //tab or space, comma and enter
            $preFilter.remove();
            autoCompelteMenu.css('opacity', 0);
        }

    }).on('keypress', '.tagit-input', function(e) {

        var $parent = $(this).parent();
        var $preFilter = $parent.find('.pre-filter');

        if (e.which == 64 && !$preFilter.length) {
            $parent.prepend('<span class="pre-filter hidden">@</span>');
            autoCompelteMenu.css('opacity', 0);
        } else if ( e.which == 64 && $preFilter.length) {
            e.preventDefault();
            this.value = '';
            $preFilter.append('@').removeClass('hidden');
            autoCompelteMenu.css('opacity', 1);
        }

        return;

    }).on('blur', '.tagit-input', function() {
        $(this).parent().find('span').remove();
        autoCompelteMenu.css('opacity', 0);
    });
});
于 2012-11-19T23:09:54.340 に答える
0

このためのMeteorパッケージを作成しました。これにより、フリー テキストと複数のオートコンプリート ソースの両方が可能になります。Meteor のデータ モデルにより、カスタム レンダリング リストを使用した複数ルールの高速検索が可能になります。Web アプリに Meteor を使用していない場合 (私は信じています)、残念ながら、これほど素晴らしいオートコンプリート機能は見つかりません。

オンラインユーザー@は緑色で表示されます。

ここに画像の説明を入力

!同じ行で、メタデータとブートストラップ アイコンを使用して他の何かをオートコンプリートします。

ここに画像の説明を入力

フォーク、プル、改善:

https://github.com/mizzao/meteor-autocomplete

于 2013-09-22T22:01:53.220 に答える