APEX 21.1 多值自动联想输入框实现需求咨询

嘿，我之前在APEX 21.1里刚好做过这种多值标签式的输入，和你想要的Stack Overflow标签框、Bootstrap多值typeahead效果一模一样！给你拆解下具体实现步骤，都是亲测有效的：

你已经有了单值autocomplete的文本字段，先修改几个关键属性：

• 存储设置：保持项类型为Text Field，如果绑定到数据库字段，确保字段是VARCHAR2类型（用来存逗号分隔的字符串）。
• HTML属性：给这个项加个自定义CSS类（比如multi-tag-input），方便后续JS定位；同时指定分隔符的属性，示例：

  class="multi-tag-input" data-separator=","
  

  记得替换成你的页面项静态ID（比如P1_OFFICE_CODES）。

核心是扩展APEX自带的autocomplete事件，阻止默认的单值替换，改成追加模式。在页面的Function and Global Variable Declaration里添加这段代码：

function initMultiTagAutocomplete() {
    // 替换成你的页面项静态ID
    const input = document.getElementById('P1_OFFICE_CODES');
    if (!input) return;

    // 监听autocomplete选中事件
    apex.jQuery(input).on('autocompleteselect', function(event, ui) {
        event.preventDefault(); // 阻止默认的单值覆盖行为
        const selectedValue = ui.item.value;
        // 拆分现有值为数组并去除空格
        const currentValues = input.value ? input.value.split(',').map(val => val.trim()) : [];
        
        // 避免重复添加相同的office code
        if (!currentValues.includes(selectedValue)) {
            currentValues.push(selectedValue);
            input.value = currentValues.join(', '); // 用逗号+空格分隔，更易读
        }
        
        // 自动添加分隔符并聚焦到末尾，方便继续输入
        setTimeout(() => {
            input.value += ', ';
            input.setSelectionRange(input.value.length, input.value.length);
        }, 10);
    });

    // 处理手动输入逗号的情况，自动去重和格式化
    input.addEventListener('blur', function() {
        const cleanedValues = this.value.split(',')
            .map(val => val.trim())
            .filter(val => val) // 过滤空值
            .filter((val, index, arr) => arr.indexOf(val) === index); // 去重
        this.value = cleanedValues.join(', ');
    });
}

因为APEX的autocomplete是动态初始化的，所以要在页面加载完成后执行我们的函数。在页面的Execute When Page Loads里添加：

apex.jQuery(document).ready(function() {
    // 延迟一点确保autocomplete组件完全加载
    setTimeout(initMultiTagAutocomplete, 500);
    // 如果你的输入项在动态刷新的区域（比如对话框、动态区域），记得在区域刷新后重新调用initMultiTagAutocomplete()
});

如果想让输入框看起来更像标签输入而不是纯文本，可以在页面的Inline CSS里加这段样式：

.multi-tag-input {
    padding: 4px 8px;
    min-height: 36px;
    line-height: 1.5;
}
.multi-tag-input::placeholder {
    color: #666;
}

（如果想要完全的标签块效果，可以进一步修改JS，把选中的值生成带删除按钮的标签元素，这个看你视觉需求，上面的基础版已经满足功能要求）

• 输入office code的部分字符，确认autocomplete下拉列表正常弹出
• 选中选项后，值会追加到输入框，不会覆盖现有内容，且重复值不会被添加
• 手动输入逗号分隔的多个值，失去焦点后会自动格式化、去重
• 提交页面后，确认逗号分隔的值正确存储到对应的字段或页面项中

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