想必大家都有遇到。在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]