JQuery UI 删除成功输入时的工具提示

Question

我正在处理带有自动完成功能的文本输入和输入失败时的工具提示，使用 JQuery UI 作为工具提示和自动完成功能。逻辑如下：

1. 当人们开始在输入上书写时，会显示一组可以输入的值
2. 如果有人决定继续写作，而不是从自动完成列表中选择任何内容，然后按“搜索”按钮，输入文本将被清除，并出现一个工具提示“请输入有效的地区”。

我的问题是，之后，如果有人进入有效区域，工具提示仍然出现在文本输入焦点上。那么，如何在正确发送输入后终止我的工具提示呢？我尝试过，但没有成功：

$(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。

Answer 1

方法 uitooltip 不是 jQuery UI 的一部分。相反，它应该是工具提示。所以，你应该使用 tooltip 而不是 uitooltip。

在自动完成小部件的更改事件处理程序中，您尝试再次使用 uitooltip 方法初始化工具提示。相反，您应该使用工具提示方法来删除工具提示。

检查是否有效。

// Remove tooltip if an item is selected
                $(this).tooltip('destroy');