jQuery自动补全场景下.val('')清空输入框失效问题

实现jQuery自动补全功能时编写的处理函数基础逻辑可正常运行，但存在异常：当用户从自动补全下拉列表选择选项时，用于清空输入框的代码未生效。

目前除$('#' + x).val('');这行清空输入框的代码未按预期执行外，其余逻辑均运行正常。

问题复现场景 #

已补全测试所需页面元素，两类场景表现差异明确：

• 手动在输入框内输入值后点击Add按钮，逻辑运行正常：输入值会被追加到textarea和span元素中，随后输入框内容被正常清空；
• 若在输入框输入"one"或"two"后从自动补全列表选择对应选项，除输入框无法被清空外，其余逻辑均正常执行。

问题原因 #

这个现象是jQuery UI Autocomplete组件的默认事件逻辑导致的：
自动补全的select事件触发时，自定义回调会先执行，等回调逻辑跑完，组件会默认执行内置逻辑，把当前选中的选项值重新填入输入框，直接覆盖了之前执行的清空操作，所以看起来清空代码完全没生效。
手动点击Add按钮的操作不会触发自动补全的select事件，不会被组件默认逻辑覆盖，所以清空操作可以正常执行，和测试表现完全匹配。

修复方法 #

在自动补全的select回调中，阻止组件的默认赋值行为即可，两种写法选其一：

1. 在回调函数内执行完业务逻辑后调用event.preventDefault()
2. 在回调函数末尾添加return false;

参考代码示例：

$("#targetInput").autocomplete({
    source: ["one", "two"], // 替换为实际的补全数据源
    select: function(event, ui) {
        // 保留原有业务逻辑：把选中值追加到textarea、span元素
        // ......
        
        // 原有的清空输入框代码
        $('#' + x).val('');
        
        // 新增下面任意一行即可修复
        event.preventDefault();
        // return false;
    }
});

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