【发布时间】：2014-05-29 14:50:05
【问题描述】：
好的，这是我的original question，但我觉得我需要问一个单独的问题，因为我没有完全理解我想要完成的事情
我正在使用 jquery Tag-it 插件https://github.com/aehlke/tag-it，并且需要将这些操作与数据库插入/更新/删除联系起来
我试图阻止的是当用户开始输入并且没有选择 jquery ui 自动完成项并通过 enter 或 tab 键或鼠标单击来集中注意力时，仍然会为用户输入的任何内容创建一个标签...我希望用户只能从jquery ui自动完成列表中选择现有标签，没有其他操作可以创建新标签，新标签将单独创建
在这里查看我的代码http://jsfiddle.net/jrizzi1/2wjKR/2/
Tag-It 函数具有带有 pre 和 post 事件的方法，例如：CreateTag 方法具有 beforeTagAdded 和 AfterTagAdded 事件。
我使用 ajax $.post 在 beforeTagAdded 事件中发布了我的数据库插入，但是因为标签不必存在，我得到了这些的孤立行（entityTags 对用户有标签“go”，标签表有没有名为“go”的标签）
我认为我可以先发布 ajax 帖子，然后尝试在从表中插入 select 并将 false 返回到 BeforeTagAdded 事件，但是 ajax 是异步的，正如下面所有善良的人所指出的那样，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("");
}
这可以防止模糊创建，但 enter 和 tab 键仍然允许不选择自动完成项
下面是我所有的代码，它使用 jquery > 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();
});
});
【问题讨论】：
标签： javascript jquery jquery-ui autocomplete tag-it