监听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;
}