帶有強制文本和自由文本的自動完成標籤

Question

我需要有允許使用自由文本的多行文本框，但是如果我啓動輸入字符：「@@」
帶有可用標籤的自動填充框應顯示並允許我從現有標籤中選擇標籤，並且標籤名稱中不應出現「@@」字符。

目前我正在玩jQuery UI的tag-it plugin，但無法弄清楚如何允許自由文本和只shw自動填充框在「@@」輸入。以及如何使用textarea而不是常規輸入。

另外，我想迫使他們，如果他們進入@@，不允許輸入自由文本，從列表中選擇（第一個可用的選擇將是一件好事）
的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/

Answer 1

既然你已經使用標籤，它的插件。我增加了一些手柄R鍵輸入處理

1. @@如果鍵入不@@

我還需要時間來調查不允許自由文本顯示自動完成爲您鍵入

自由文本如果@@鍵入

DEMO：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); 
    }); 
}); 

Answer 2

我創建了一個Meteor包用於此目的，同時允許自由文本和多個自動完成資源。流星的數據模型允許使用自定義渲染列表進行快速多規則搜索。如果你不使用Meteor作爲你的網絡應用程序，（我相信）你不幸找不到自動完成的任何東西。

與@，自動填入用戶，其中在線用戶以綠色顯示：

在同一條線上，自動填入元數據和引導圖標別的使用!：

叉，拉和改進：

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