input或者select搜索功能处理输入值为中文时

想必大家都有遇到。在input框中输入值的时候，英文很nice,但是一遇到中文，内心就很崩溃，经历过的都知道。在这里总结一下经验。有两个方法，说实话我也是第一次见，compositionstart，通俗说这个方法是监听中文输入法开始之后，compositionend 这个方法时间监听输入法结束时候，列举一个select搜索例子供大家参考，话不多说直接贴代码！

<select name="modules" id="creator" lay-search>
 	<option value="">请输入创建者</option>
</select>

//定义一个变量控制输入法开始或者结束时。
 var flag = true;
 //中文输入法开始事件  如果input是动态加载的应该这样写：
		$('#modelCerator').on('compositionstart','.layui-input',function(){
            flag = false;
        });
//中文输入法结束事件
        $('#modelCerator').on('compositionend','.layui-input',function(){
            flag = true;
        });
 //这里用了layui组件  这里使用键盘弹起事件
 $('#modelCerator').on('keyup', '.layui-input', function () {
            var _this = this;
            setTimeout(function(){
                // 这里防止事件的先后顺序出错  给个延迟
                if(flag){
                    var cre = $(_this).val();
                    $.ajax({
                        url: 'xxx.json',
                        async: true,
                        type: 'post',
                        data: {userName: cre},
                        success: function (data) {
                            var optionHtml = '<option value=""></option>';
                            for (var index in data) {
                                optionHtml += '<option value="' + data[index]['name'] + '">' + data[index]['fullname'] + '</option>';
                            }
                            $('#creator').html(optionHtml);
                            form.render('select');
                            $('select[name="modules"]').next().find('.layui-select-title input').val(cre);
                            $('select[name="modules"]').next().find('.layui-select-title input').focus();
                            $('select[name="modules"]').next().find('.layui-select-title input').click();
                        }
                    })
                }
            },0)
        })

以上内容自己总结，若有侵权，看可以联系我：qq邮箱：[email protected]/163邮箱：[email protected]