我正在处理带有自动完成功能的文本输入和输入失败时的工具提示,使用 JQuery UI 作为工具提示和自动完成功能。逻辑如下:
我的问题是,之后,如果有人进入有效区域,工具提示仍然出现在文本输入焦点上。那么,如何在正确发送输入后终止我的工具提示呢?我尝试过,但没有成功:
$(document).ready(function(){
var availableTags;
$('#form-district').uitooltip({
position: { my: "left bottom", at: "left top" }
}).uitooltip('open')
$.ajax({
url: '/_autocomplete'
}).done(function (data){
availableTags = data;
var lowerCaseTags = availableTags.map(element => {
return element.toLowerCase()
})
$('#district_autocomplete').autocomplete({
source: function(request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(data, function(item){
return matcher.test(item);
}));
},
minLength: 1,
change: function (event, ui) {
if (!ui.item) {
var userInput = $(this).val().toLowerCase();
if (!lowerCaseTags.includes(userInput)) {
$(this).val('');
$(this).attr('title', 'Please enter a valid district').uitooltip({
position: { my: "left top-100", at: "left bottom" }
}).uitooltip('open');
}
} else{
$(this).uitooltip('remove'); // my try
}
},
autoFocus: true,
appendTo: "#formdistrict .input-group"
});
});
});
PS:必须桥接
ui.tooltip
到 uitooltip
,因为我也在加载 BS5。
方法 uitooltip 不是 jQuery UI 的一部分。相反,它应该是工具提示。所以,你应该使用 tooltip 而不是 uitooltip。
在自动完成小部件的更改事件处理程序中,您尝试再次使用 uitooltip 方法初始化工具提示。相反,您应该使用工具提示方法来删除工具提示。
检查是否有效。
// Remove tooltip if an item is selected
$(this).tooltip('destroy');