即时搜索框输入中文未完成时会搜索英文字符的解决方案

最新推荐文章于 2025-02-13 09:37:57 发布

转载最新推荐文章于 2025-02-13 09:37:57 发布 · 813 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/3body/p/10904968.html

博客指出动态搜索框中文搜索时，输入特定情况会搜索错误关键字。可通过 onCompositionStart 和 onCompositionEnd 两个仅中文输入触发的事件解决。在 onChange 时通过判断 lock 决定是否搜索，因 onCompositionEnd 在 onChange 后触发，需在该事件时调用一次搜索接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态搜索框在进行中文搜索时，通常情况下，输入下面这种情况的时候，会搜索 chengd 关键字，但这并不是我们想要的。

那么怎么解决呢？可以通过两个事件：onCompositionStart 和 onCompositionEnd 解决这个问题。

这两个事件都是在输入中文时才会触发，英文输入法不会触发。

onChange 的时候通过判断 lock 执行是否搜索的功能。当中文输入开始时，将 lock 设置为 true 便不会进行搜索，输入结束后 lock 改为 false 便开始搜索，不过有个问题是 onCompositionEnd 是在 onChange 之后触发，所以需要在 onCompositionEnd 时调用一次搜索接口。

    // 中文输入法开始输入进行加锁
    onInputStart = () => {
        lock = true;
    };
    // 中文输入法输入完成的时候进行搜索
    onInputEnd = () => {
        const { comSearch } = this.props;
        lock = false;
        comSearch.onSearch(comSearch.input);
    };

    onSearch = (e) => {
        const { comSearch } = this.props;
        comSearch.changeInput(e.target.value, !lock);  // 没上锁的时候才进行搜索。此方法包含搜索功能
    };