输入有效内容后如何移除jQuery UI Tooltip？（自动补全场景）

问题分析 #

你遇到的核心问题是：无效输入触发Tooltip后，即使输入有效内容，聚焦时Tooltip依然显示。原因在于：

• 无效输入时你动态给输入框创建了新的uitooltip实例，但有效输入时仅调用remove没有彻底清除实例关联和触发源（title属性）；
• 初始代码中提前给#form-district绑定了Tooltip，可能和输入框的Tooltip产生冲突。

修复方案 #

调整代码逻辑，确保有效输入时彻底清理Tooltip的实例和触发属性，同时避免重复创建Tooltip：

$(document).ready(function(){
    var availableTags;
    const $districtInput = $('#district_autocomplete');

    // 移除不必要的初始form-district Tooltip（如果不需要的话）
    // $('#form-district').uitooltip(...).uitooltip('open')

    $.ajax({
        url: '/_autocomplete'
    }).done(function (data){
        availableTags = data;
        var lowerCaseTags = availableTags.map(element => element.toLowerCase());

        $districtInput.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) {
                // 先清除可能存在的Tooltip
                if ($(this).data('uitooltip')) {
                    $(this).uitooltip('close').uitooltip('destroy');
                }
                $(this).removeAttr('title');

                if (!ui.item) {
                    var userInput = $(this).val().toLowerCase();
                    if (!lowerCaseTags.includes(userInput)) {
                        $(this).val('');
                        // 重新创建Tooltip并显示
                        $(this).attr('title', 'Please enter a valid district').uitooltip({
                            position: { my: "left top-100", at: "left bottom" }
                        }).uitooltip('open');
                    }
                }
            },
            autoFocus: true,
            appendTo: "#formdistrict .input-group"
        });
    });
});

关键修改点 #

1. 统一管理Tooltip生命周期：在change事件触发时，先检查并销毁输入框上已存在的uitooltip实例，同时清除title属性——这是Tooltip自动触发的核心源；
2. 避免重复初始化：移除了初始对#form-district的Tooltip绑定（如果该元素不需要常驻Tooltip的话），防止和输入框的Tooltip产生冲突；
3. 简化逻辑：把输入框元素缓存为变量$districtInput，提升代码可读性和性能。

额外建议 #

如果需要在输入框聚焦时也检查有效性，可以添加focus事件监听，确保聚焦时如果输入有效就不会显示Tooltip：

$districtInput.on('focus', function() {
    if ($(this).data('uitooltip')) {
        $(this).uitooltip('close').uitooltip('destroy');
    }
    $(this).removeAttr('title');
});

内容的提问来源于stack exchange，提问作者Juan C