请看以下情景:
我添加了一个名为" facebook"的令牌。我想添加一个名为" book"的新令牌。如果我写书并按回车键,它会自动选择脸书而不是添加名为" book"的新标签。
有没有解决办法来实现这个目标?
答案 0 :(得分:0)
$(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();
});
});
&#13;
<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>
&#13;