監聽input框變化，即時搜索 compositionstart， compositionend

前話： 如果直接通過input監聽， 它是鍵盤輸入按鍵按下了就觸發時間，這樣可能導致一些問題，比如在谷歌瀏覽器想輸入中文輸入不了；

解決方案： 用 compositionstart 和 compositionend， 這個 會在選定文字后才出發 input 事件；

 

注意： 因為谷歌瀏覽器跟其他瀏覽器的執行順序不同， 谷歌是 compositionstart  => 監聽input事件 => compositionend,   其他瀏覽器是 compositionstart  => compositionend => 監聽input事件，

           所以 要在 compositionend 里面判斷是否是谷歌瀏覽器，做瀏覽器的兼容輸入；

 

另外還有一個坑， 就是 即時搜索input監聽  ajax  請求接口的時候，不同做同步 async: false， 必須異步， 不然瀏覽器直接卡死崩潰，這個在本地測試不會出問題，到線上就出現！！！

 

        var flag = false; // true 正在輸入
        
        // 這里 input是自己input元素，比如id #id這種
        $('body').on('compositionstart', ' .search_code .layui-select-title input', function(){
            flag = true;
        });

        $('body').on('compositionend', '.search_code .layui-select-title input', function(){
            flag = false;

            // 判斷是否是谷歌瀏覽器
            if(!flag && isChrome()){
                changeEvent(this)
            }

        }); 

        // 監聽input事件
        $('body').on('input change', '.search_code .layui-select-title input', function(){
            changeEvent(this)
        })
     

   function changeEvent(_this){
        if(!flag){
            // 輸入的值
            var val = $.trim($(_this).val());

            $.ajax({
                url: '接口url',
                type: 'post',
                dataType: 'json',
                contentType:'application/json; charset=utf-8',
                // async: false, // 不能是同步
                data: params,
                success: function (res) {
                    console.log(res);
                    var data = res.data;
                    if (res) {
                        var html = '';

                        if (res.code != 0) {
                            html += '<option value="" >請輸入食品編碼或名稱來搜索</option>';
                        } else {
                            for(var i=0; i<data.length; i++){
                                html += '<option value="'+ data[i].code +'">';
                                html += data[i].code + '  '+ data[i].name + '</option>';
                            }
                        }

                        $('select[name=food_code]').html(html);
                        
                        // 保持聚焦， 不然輸入后就沒光標了
                        $('.search_code .layui-select-title input').focus();
                        
                        // 重新賦值上去，不同寫法自己要做改變
                        $('.search_code .layui-select-title input').val(val);
                        
                    }
                }
            });
        }
    }
        
/**
 * 判斷是否是谷歌
 */
function isChrome(){
    var browser = {
        versions: function() {
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE內核
                presto: u.indexOf('Presto') > -1, //opera內核
                webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否為移動終端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器
                iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否為iPhone或者QQHD瀏覽器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }

    if(browser.versions.webKit){
        return true;
    }

    return false;
}