Question

好的，所以这是我的original question，但觉得我需要另外提问，因为我不完全理解我想要完成的事情

我正在使用jquery Tag-it插件https://github.com/aehlke/tag-it，需要将这些操作绑定到数据库插入/更新/删除

我想要防止的是当用户开始输入并且没有选择jquery ui自动完成项目并通过输入或Tab键或鼠标单击进行聚焦时，仍会为用户键入的任何内容创建标记... i希望用户只能从jquery ui自动完成列表中选择现有标签，没有其他操作可以创建新标签，新标签将单独创建

在此处查看我的代码http://jsfiddle.net/jrizzi1/2wjKR/2/

Tag-It函数具有前后事件的方法，例如：CreateTag方法具有beforeTagAdded和AfterTagAdded事件。

我使用ajax $ .post在beforeTagAdded事件中发布了我的数据库插入，但因为标签不一定存在，我得到这些的孤立行（entityTags有标记＆＃34; go＆＃34; for a user，tags table没有名为＆＃34; go＆＃34;）

的标签

我认为我可以拥有ajax帖子然后尝试先从表中插入select并将false返回到BeforeTagAdded事件，但是ajax是asynch，就像下面所有类型的人都注意到的那样，beforeTagAdded完成之前AJAX

我还在自动完成小部件上尝试了一些不同的东西，例如

        change: function (event, ui) {
            if(!ui.item){
                //http://api.jqueryui.com/autocomplete/#event-change -
                // The item selected from the menu, if any. Otherwise the property is null
                //so clear the item for force selection
                $(".tagit-new input").val("");
            }

可防止模糊创建，但输入和标签键仍然不允许选择自动完成项目

这是我下面的所有代码，它使用jquery＆gt; 1.5.2 jquery ui 1.8.12，tag-it 2.0

var entity_id = getParameterByName('idnumber');


function dotagit(){
        $("#myTags").tagit({
//removeConfirmation: true,         
 beforeTagAdded: function(event, ui) { //before the tag is added to the client, NOT the database    
     if ( !ui.duringInitialization){
         //console.log(ui);              

            $.ajax({
                    url: "handlers/tags.ashx",
                    dataType: "json",
                    data: {
                        idnumber: entity_id,
                        tag: ui.tagLabel,
                        operation:"tag"
                    }
                }).done(function(data){

                    if(data.result == false){
                     return false;
                    }
                }).complete(function(data){

                });

         }
 },
 afterTagAdded: function(event, ui) {

    if ( !ui.duringInitialization){
        console.log('after'); 
         }
    },      

 beforeTagRemoved: function(event, ui) {

        $.ajax({
                    url: "handlers/tags.ashx",
                    dataType: "json",
                    data: {
                        idnumber: entity_id,
                        tag: ui.tagLabel,
                        operation:"removetag"
                    }
                }).done(function(data){
        //console.log(data);    
            });
    },
 afterTagRemoved: function(event, ui) {
 },

onTagExists: function(event, ui) {
        // do something special
        console.log(ui.tag);
        console.log('onTagExists');     
    },          

 autocomplete: { source: function( request, response ) {
                $.ajax({
                    url: "handlers/tags.ashx",
                    dataType: "json",
                    data: {
                        idnumber: entity_id,
                        q: request.term,
                        operation:"query"
                    }
                }).done(function(data){
        //console.log(data);
                        response( $.map( data.data, function( item ) {
                            return {
                                label: item.NAME + " x " + item.COUNT,  // + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.NAME
                            }
                        }));        
                })
            },
            change: function (event, ui) {
                if(!ui.item){
                    //http://api.jqueryui.com/autocomplete/#event-change -
                    // The item selected from the menu, if any. Otherwise the property is null
                    //so clear the item for force selection
                    $(".tagit-new input").val("");
                }

            }, 

            minLength: 0
                    }
                });         
    };


$(document).ready(function() {


$.ajax({  
  type: "GET",  
  url: "handlers/tags.ashx",
  data: {
          idnumber: entity_id,
          operation:"get"
                    }
  }).done(function(data){
        //console.log(data);
        $.each(data.data, function(key, value){
            $('#myTags').append('<li>'+value.TAG+'</li>');
            });

  }).fail(function(xhr, err){   
        var responseTitle= $(xhr.responseText).filter('title').get(0);
        alert($(responseTitle).text() + "\n" + formatErrorMessage(xhr, err) ); 
  }).complete(function(){
        dotagit();  
  });
});

Answer 1

使用tag-it，我不相信这可以在不修改源代码的情况下实现。（我愿意在此纠正！）如果您可以灵活地实施，我建议jQuery TokenInput，默认情况下可以这样做。（设置allowFreeTagging: false）。

无论如何，关于修改tagit源。 blur-add和enter / tab-add是分开处理的。

输入/ Tab add是第269-272行

 if (!(that.options.autocomplete.autoFocus && that.tagInput.data('autocomplete-open'))) {
                                that.tagInput.autocomplete('close');
                                that.createTag(that._cleanedInput());
}

模糊添加是第277-9行

if (!that.tagInput.data('autocomplete-open')) {
                        that.createTag(that._cleanedInput());
                    }

现在，我相信如果您注释掉两个createTag行，那么您将拥有只能通过在列表中单击标记来添加标记的行为。（我认为这是在第286行处理的。）或者，如果您仍然希望能够在blur / enter上添加标签，只有当它们在数据库中时，您可能希望在此时插入您的AJAX调用 - 并且将createTag行添加到AJAX的done块。

（行号指v2.0，当前GitHub Version。）

jquery ui：强制选择自动完成

1 个答案: