JQuery Tokeninput - Добавить новый тег - проблема, если новый маркер подстрока любого существующего маркера

Question

Посмотрите на следующий сценарий:

Я добавил фишку под названием «facebook». Я хочу добавить новый токен под названием «книга». Если я пишу книгу и нажимаю enter, она автоматически выбирает facebook вместо добавления нового тега, называемого «книга».

Есть ли решение для достижения этой цели?

Answer 1

\t \t $(function(){ 
 
\t \t var availableTags = [ 
 
\t \t      "actionscript", 
 
\t \t      "applescript", 
 
\t \t      "asp", 
 
\t \t      "basic", 
 
\t \t      "c", 
 
\t \t      "c++", 
 
\t \t      "clojure", 
 
\t \t      "coldfusion", 
 
\t \t      "erlang", 
 
\t \t      "fortran", 
 
\t \t      "groovy", 
 
\t \t      "haskell", 
 
\t \t      "java", 
 
\t \t      "javascript", 
 
\t \t      "lisp", 
 
\t \t      "perl", 
 
\t \t      "php", 
 
\t \t      "Python", 
 
\t \t      "ruby", 
 
\t \t      "scala", 
 
\t \t      "scheme" 
 
\t \t     ]; 
 
\t \t     $("#etags").autocomplete({ 
 
\t \t      source: availableTags 
 
\t \t     }); 
 
\t 
 
\t \t      
 
\t \t $('#tags input').on('focusout',function(){  
 
\t \t  var txt= this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g,''); // allowed characters 
 
\t \t  if(txt) { 
 
\t \t \t  var flag = false; 
 
\t \t \t  $(".tag").each(function() 
 
\t \t \t  { 
 
\t \t \t \t \t \t var id = $(this).attr("id"); \t 
 
\t \t \t \t \t \t if(id == txt) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t flag = true; 
 
\t \t \t \t \t \t } \t \t 
 
\t \t \t  }); 
 
\t \t \t  if(flag) 
 
\t \t \t  { 
 
\t \t \t \t  alert("Tag already exist!!") 
 
\t \t \t  } 
 
\t \t \t  else 
 
\t \t \t  { 
 
\t \t \t  \t $(this).before('<span class="tag" id ='+txt+' >'+ txt.toLowerCase() +'</span>'); 
 
\t \t \t  }  
 
\t \t \t  
 
\t \t \t    
 
\t \t  } 
 
\t \t  this.value=""; 
 
\t \t }).on('keyup',function(e){ 
 
\t \t  // if: comma,enter (delimit more keyCodes with | pipe) 
 
\t \t  if(/(188|13)/.test(e.which)) $(this).focusout(); 
 
\t 
 
\t \t }); 
 
\t \t 
 
\t \t 
 
\t \t $('#tags').on('click','.tag',function(){ 
 
\t \t  if(confirm("Really delete this tag?")) $(this).remove(); 
 
\t \t }); 
 
\t 
 
\t \t });

\t \t <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
\t <link rel="stylesheet" href="/resources/demos/style.css"> 
 
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
\t <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
\t <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<title>Multiple tags Seperated by comma or Enter by Balram Singh</title> 
 
    
 
    
 
    <div id="tags"> 
 
<span class="tag" id="Wordpress">wordpress</span> 
 
<span class="tag" id="c++">c++</span> 
 
<span class="tag" id="jquery">jquery</span> 
 
<input type="text" id="etags" value="" placeholder="Enter multiple Tags Seperate by comma or Enter " /> 
 
    </div>