Javascript 如何让jQuery tagit仅在自动完成中未选择任何内容时按Enter键创建标记
我将jQuery标记与Autocomplete一起使用。我希望这样,当用户点击回车键时,如果他们没有选择任何自动完成建议,它将根据输入的内容创建一个标签。如果他们确实按下键并选择其中一个选项,我希望它使用该值来创建标记 我遇到的问题是,当按下Enter按钮时,它会覆盖autocomplete中的Select函数,导致它根据键入的内容而不是选定的内容创建标记 下面是稍微修改过的tagit小部件的片段Javascript 如何让jQuery tagit仅在自动完成中未选择任何内容时按Enter键创建标记,javascript,jquery,jquery-autocomplete,tag-it,Javascript,Jquery,Jquery Autocomplete,Tag It,我将jQuery标记与Autocomplete一起使用。我希望这样,当用户点击回车键时,如果他们没有选择任何自动完成建议,它将根据输入的内容创建一个标签。如果他们确实按下键并选择其中一个选项,我希望它使用该值来创建标记 我遇到的问题是,当按下Enter按钮时,它会覆盖autocomplete中的Select函数,导致它根据键入的内容而不是选定的内容创建标记 下面是稍微修改过的tagit小部件的片段 // Autocomplete. if (this.options.availab
// Autocomplete.
if (this.options.availableTags || this.options.tagSource) {
this._tagInput.autocomplete({
source: this.options.tagSource,
focus: function(event, ui) {
//$(this).val(ui.item.label);
return false;
},
select: function(event, ui) {
// Delete the last tag if we autocomplete something despite the input being empty
// This happens because the input's blur event causes the tag to be created when
// the user clicks an autocomplete item.
// The only artifact of this is that while the user holds down the mouse button
// on the selected autocomplete item, a tag is shown with the pre-autocompleted text,
// and is changed to the autocompleted text upon mouseup.
if (that._tagInput.val() === '') {
that.removeTag(that._lastTag(), false);
}
that.createTag(ui.item.label,'',ui.item.value);
// Preventing the tag input to be updated with the chosen value.
return false;
}
}).data("autocomplete")._renderItem = function( ul, item ) {
var job ="";
if (item.job) job = item.job;
var row = "<a><span class='searchnamedisplay'>" + item.label + " </span><span class='searchjobdisplay'>"+job+"</span><span class='searchnamedisplay' style='width:120px;font-style:italic;color:#A19D9D;'>" + item.specialty + "</span><img src='/images/profile/"+item.value+".jpg' alt='person' width='25' height='25' border='0' style='padding-left:8px;padding-top:2px;' onerror='this.style.display=\"none\"' /><div style='clear:both'/></a>";
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( row )
.appendTo( ul );
};
}
// Events.
this._tagInput
.keydown(function(event) {
// Backspace is not detected within a keypress, so it must use keydown.
if (event.which == $.ui.keyCode.BACKSPACE && that._tagInput.val() === '') {
var tag = that._lastTag();
if (!that.options.removeConfirmation || tag.hasClass('remove')) {
// When backspace is pressed, the last tag is deleted.
that.removeTag(tag);
} else if (that.options.removeConfirmation) {
tag.addClass('remove ui-state-highlight');
}
} else if (that.options.removeConfirmation) {
that._lastTag().removeClass('remove ui-state-highlight');
}
// Comma/Space/Enter are all valid delimiters for new tags,
// except when there is an open quote or if setting allowSpaces = true.
// Tab will also create a tag, unless the tag input is empty, in which case it isn't caught.
if (
event.which == $.ui.keyCode.COMMA ||
event.which == $.ui.keyCode.ENTER ||
(
event.which == $.ui.keyCode.TAB &&
that._tagInput.val() !== ''
) ||
(
event.which == $.ui.keyCode.SPACE &&
that.options.allowSpaces !== true &&
(
$.trim(that._tagInput.val()).replace( /^s*/, '' ).charAt(0) != '"' ||
(
$.trim(that._tagInput.val()).charAt(0) == '"' &&
$.trim(that._tagInput.val()).charAt($.trim(that._tagInput.val()).length - 1) == '"' &&
$.trim(that._tagInput.val()).length - 1 !== 0
)
)
)
) {
event.preventDefault();
that.createTag(that._cleanedInput());
// The autocomplete doesn't close automatically when TAB is pressed.
// So let's ensure that it closes.
that._tagInput.autocomplete('close');
}
}
//自动完成。
if(this.options.availableTags | | this.options.tagSource){
这是。_tagInput.autocomplete({
来源:this.options.tagSource,
焦点:功能(事件、用户界面){
//$(this.val(ui.item.label);
返回false;
},
选择:功能(事件、用户界面){
//如果我们在输入为空的情况下自动完成某些内容,则删除最后一个标记
//这是因为输入的模糊事件导致在
//用户单击自动完成项目。
//唯一的问题是当用户按下鼠标按钮时
//在所选的自动完成项上,会显示一个带有预自动完成文本的标记,
//并在鼠标点击时更改为自动完成的文本。
如果(该._tagInput.val()=''){
that.removeTag(that.\u lastTag(),false);
}
createTag(ui.item.label',ui.item.value);
//防止使用所选值更新标记输入。
返回false;
}
}).数据(“自动完成”)。\u renderItem=功能(ul,项目){
var job=“”;
如果(item.job)job=item.job;
var row=”“+item.label+“”+job+“”+item.speciality+“”;
返回$(“”)
.data(“item.autocomplete”,item)
.append(行)
.附录(ul);
};
}
//事件。
这是输入
.keydown(功能(事件){
//在按键中未检测到退格,因此必须使用keydown。
if(event.which=$.ui.keyCode.BACKSPACE&&that.\u tagInput.val()==''){
var tag=that._lastTag();
如果(!that.options.removeConfimation | | tag.hasClass('remove')){
//按backspace时,最后一个标记将被删除。
移除标签;
}else if(that.options.removeconfimation){
tag.addClass('remove ui state highlight');
}
}else if(that.options.removeconfimation){
即.u lastTag().removeClass('removeUI状态突出显示');
}
//逗号/空格/回车都是新标记的有效分隔符,
//除非存在开放报价或设置allowSpaces=true。
//Tab还将创建一个标记,除非标记输入为空,在这种情况下它不会被捕获。
如果(
event.which==$.ui.keyCode.COMMA||
event.which==$.ui.keyCode.ENTER||
(
event.which==$.ui.keyCode.TAB&&
那._tagInput.val()!=''
) ||
(
event.which==$.ui.keyCode.SPACE&&
that.options.allowSpaces!==true&&
(
$.trim(that._tagInput.val()).replace(/^s*/,'').charAt(0)!=''''||
(
$.trim(that._tagInput.val()).charAt(0)='''“'&&
$.trim(that.\tagInput.val()).charAt($.trim(that.\tagInput.val()).length-1)='''''&&
$.trim(that._tagInput.val()).length-1!==0
)
)
)
) {
event.preventDefault();
that.createTag(that._cleanedInput());
//按下TAB键时,自动完成不会自动关闭。
//因此,让我们确保它关闭。
那._tagInput.autocomplete('close');
}
}