好的，这是我的 original question ，但感觉我需要问一个单独的问题，因为我没有完全理解我想要完成的任务
我正在使用 jquery Tag-it 插件 https://github.com/aehlke/tag-it ，并且需要将这些操作与数据库插入/更新/删除联系起来
我试图阻止的是，当用户开始输入并且没有选择 jquery ui 自动完成项并通过 Enter 或 Tab 键或鼠标单击将焦点移开时，仍然会为用户输入的任何内容创建一个标签...i希望用户只能从 jquery ui 自动完成列表中选择现有标签，没有其他操作可以创建新标签，新标签将单独创建
在此处查看我的实际代码 http://jsfiddle.net/jrizzi1/2wjKR/2/
Tag-It 函数具有带有 pre 和 post 事件的方法，例如:CreateTag 方法具有 beforeTagAdded 和 AfterTagAdded 事件。
我使用ajax $.post在beforeTagAdded事件中发布我的数据库插入，但是因为标签不必存在，所以我得到了这些孤立的行(entityTags具有用户的标签“go”，标签表有没有名为“go”的标签)
我认为我可以让ajax发布，然后尝试在从表中插入选择之前，并向BeforeTagAdded事件返回false，但是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();
});
});
最佳答案
使用 tag-it，我不相信在不修改源代码的情况下这是可能的。 (我愿意在这里纠正!)如果您可以灵活地实现，我建议 jQuery TokenInput ，默认情况下可以执行此操作。 (设置allowFreeTagging:false)。
无论如何，关于修改 tagit 源。模糊添加和输入/选项卡添加是分开处理的。
Enter/Tab 添加是第 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 行处理的。)或者，如果您仍然希望能够在模糊/输入上添加标签，仅当它们在数据库中时，您可能希望在此时插入 AJAX 调用 - 并且将 createTag 行添加到 AJAX 的 done block 中。
(行号引用 v2.0，当前 GitHub Version 。)
关于javascript - jquery 用户界面 :Force selection of autocomplete，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23936204/