jQuery Tokeninput - 添加新标签 - 如果新令牌是任何现有令牌的子字符串，则发出

Question

看下面的场景：

我添加了一个名为“facebook”的令牌。我想添加一个名为“book”的新令牌。如果我写书并按回车，它会自动选择 facebook 而不是添加名为“book”的新标签。

有什么办法可以实现吗？

Answer 1

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

		<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
	  <link rel="stylesheet" href="/resources/demos/style.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	  <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>