JQuery Autocomplete在非英语语言下无法正常工作

我之前也碰到过一模一样的坑，问题根源其实在contenteditable元素的输入事件逻辑和输入法的组合输入状态上。默认情况下，jQuery Autocomplete监听的是input事件，但像俄语这类需要输入法逐字选拼的语言，在你完成选字确认前，浏览器不会触发标准的input事件——这就导致Autocomplete的source回调连触发的机会都没有。

下面是几个亲测有效的解决方案：

1. 监听输入法组合结束事件，手动触发搜索 #

针对contenteditable元素，我们需要额外监听compositionend事件（这个事件会在用户完成输入法组合输入、字符真正写入DOM后触发），然后手动调用Autocomplete的搜索方法：

// 先正常初始化Autocomplete
$this.autocomplete({
    position: { my : "right top", at: "right bottom" },
    source: function(request, response) {
        var str = _leftMatch(request.term.trim(), $("#tags")[0]);
        str = (str != null) ? str[0] : "";
        response($.ui.autocomplete.filter(cities, str));
    },
    focus: function() {
        return false; // 阻止默认focus行为，避免光标乱跳
    }
});

// 新增compositionend事件监听，手动触发搜索
$this.on('compositionend', function() {
    $(this).autocomplete("search", $(this).text().trim());
});

2. 修正contenteditable的内容获取逻辑 #

普通input的value属性在contenteditable元素上并不靠谱，有时候Autocomplete无法正确抓取输入内容。可以直接从元素本身获取纯文本，替代request.term：

source: function(request, response) {
    // 直接从contenteditable元素读取纯文本内容
    var inputText = $this.text().trim();
    var str = _leftMatch(inputText, $("#tags")[0]);
    str = (str != null) ? str[0] : "";
    response($.ui.autocomplete.filter(cities, str));
}

3. 替换默认事件绑定（进阶方案） #

如果上面的方法还是不行，可以直接替换Autocomplete默认的事件监听逻辑，让它同时响应input和compositionend事件：

// 初始化后，重新绑定事件
$this.autocomplete("instance")._on($this, {
    input: function(event) {
        this._search(event);
    },
    compositionend: function(event) {
        this._search(event);
    }
});

另外提一句：你在focus回调里返回false的做法很明智，能避免Autocomplete弹出时光标跳转到奇怪的位置，这个细节可以保留。

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