Znaczniki autouzupełniania z wymuszaniem i tekstem wolnym

Question

Potrzebuję wieloliniowego pola tekstowego z wolnym tekstem, ale jeśli zacznę pisać znaki: "@@"
, pole autouzupełniania z dostępnymi tagami powinno się pojawić i pozwolić mi aby wybrać znaczniki z istniejącego, a znaki "@@" nie powinny występować w nazwie znacznika.

Obecnie gram z użytkownikiem tag-it plugin dla interfejsu użytkownika jquery, ale nie wiem, w jaki sposób zezwolić na dostęp do bezpłatnego tekstu i tylko w polu autouzupełniania shw w polu "@@". i jak do textarea użytkownika zamiast zwykłego wejścia.

Również chciałbym, aby zmusić ich do wyboru z listy, jeśli wejdą @@ i nie pozwalają, aby wpisać dowolny tekst (pierwszy dostępny wybór będzie dobry)
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"/> 
​ 

testowanie tutaj: http://jsfiddle.net/hailwood/u8zj5/

Answer 1

Ponieważ użył tag-to plugin .. dodałem trochę uchwyt r do wejścia do obsługi

1. @@ pokazać auto kompletne jak wpiszesz
2. Darmowe tekst, jeśli wpisane bez @@

nadal potrzebują czasu, aby zajrzeć do Nie dopuszczać dowolny tekst jeśli @@ jest wpisany

DEMO:http://jsfiddle.net/xBgfJ/2/ i poniżej jest pełny kod,

Uwaga: Poniżej kod jest uszczypnąć do istniejącego kodu wtyczki.

$(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

Utworzyłem Meteor pakiet dla tego, który pozwala zarówno dowolny tekst i wiele źródeł autouzupełniania. Model danych Meteor umożliwia szybkie wyszukiwanie wielu reguł za pomocą niestandardowych wyświetlanych list. Jeśli nie używasz Meteora do swojej aplikacji internetowej (wierzę), niestety nie znajdziesz niczego tak niesamowitego do autouzupełniania.

funkcji automatycznego uzupełniania użytkownicy z @, gdzie użytkownicy online pokazywane na zielono:

W tej samej linii, funkcji automatycznego uzupełniania coś innego korzystając ! z metadanych i bootstrap ikon:

Widelec, pociągnij i popraw:

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