jQuery Tokeninput - 添加新标记 - 如果新标记是任何现有标记的子字符串，则发出问题

Question

Look at following scenario:

I have added a token called "facebook". I want to add a new token called "book". If I write book and press enter, it automatically selects facebook instead of adding new tag called "book".

Is there any solution to achieve this?

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>
  

</div>