瓦尔登湖

前话： 如果直接通过input监听， 它是键盘输入按键按下了就触发时间，这样可能导致一些问题，比如在谷歌浏览器想输入中文输入不了；
解决方案： 用 compositionstart 和 compositionend，这个会在选定文字后才出发 input 事件；

注意：因为谷歌浏览器跟其他浏览器的执行顺序不同， 谷歌是 compositionstar => 监听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;
}