Devbridge Autocomplete首数组无匹配时，能否加载第二数组检索？

当然可以实现这个需求！devbridge Autocomplete提供了灵活的配置方式，让你能自定义搜索逻辑，优先使用第一个数组检索，无匹配时自动 fallback 到第二个数组。下面是具体的实现方案：

方法一：自定义搜索函数（推荐） #

我们可以通过自定义lookup函数来控制检索逻辑，先在fruits数组中查找匹配项，若无结果则转向vegetables数组：

// 自定义搜索逻辑函数
function customSearchHandler(query, doneCallback) {
    // 优先在fruits数组中执行匹配（使用插件内置的匹配逻辑）
    const fruitMatches = erpjs(Pid).devbridgeAutocomplete.utils.matcher(query, fruits, 'value');
    
    // 如果fruits无匹配结果，再检索vegetables数组
    if (fruitMatches.length === 0) {
        const veggieMatches = erpjs(Pid).devbridgeAutocomplete.utils.matcher(query, vegetables, 'value');
        doneCallback(veggieMatches);
    } else {
        doneCallback(fruitMatches);
    }
}

// 初始化Autocomplete时使用自定义搜索函数
erpjs(Pid).devbridgeAutocomplete({
    lookup: customSearchHandler,
    minChars: 0,
    // 可添加其他你需要的配置项，比如formatResult、onSelect等
});

代码说明 #

• customSearchHandler函数接收两个参数：用户输入的检索关键词query，以及用于返回结果的回调doneCallback
• 我们使用插件内置的utils.matcher方法来保持和默认检索一致的匹配规则（比如前缀匹配、大小写不敏感等），避免自己写过滤逻辑出现差异
• 先检查fruits的匹配结果长度，为空则切换到vegetables数组检索，最后通过doneCallback把结果传给Autocomplete组件

方法二：手动处理检索逻辑（自定义匹配规则） #

如果你需要完全自定义匹配规则（比如模糊匹配任意位置的字符），可以用Array.filter实现：

function customSearchHandler(query, doneCallback) {
    const lowerQuery = query.toLowerCase();
    // 自定义匹配规则：value中包含关键词（不区分大小写）
    const fruitMatches = fruits.filter(item => 
        item.value.toLowerCase().includes(lowerQuery)
    );
    
    if (fruitMatches.length === 0) {
        const veggieMatches = vegetables.filter(item => 
            item.value.toLowerCase().includes(lowerQuery)
        );
        doneCallback(veggieMatches);
    } else {
        doneCallback(fruitMatches);
    }
}

// 初始化Autocomplete
erpjs(Pid).devbridgeAutocomplete({
    lookup: customSearchHandler,
    minChars: 0,
});

这样就能完美实现你想要的“优先检索第一个数组，无匹配时自动加载第二个数组检索”的需求啦！

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