Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何让jQuery tagit仅在自动完成中未选择任何内容时按Enter键创建标记_Javascript_Jquery_Jquery Autocomplete_Tag It - Fatal编程技术网

Javascript 如何让jQuery tagit仅在自动完成中未选择任何内容时按Enter键创建标记

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

我将jQuery标记与Autocomplete一起使用。我希望这样,当用户点击回车键时,如果他们没有选择任何自动完成建议,它将根据输入的内容创建一个标签。如果他们确实按下键并选择其中一个选项,我希望它使用该值来创建标记

我遇到的问题是,当按下Enter按钮时,它会覆盖autocomplete中的Select函数,导致它根据键入的内容而不是选定的内容创建标记

下面是稍微修改过的tagit小部件的片段

// 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'); } }