文章目录
input 搜索会造成什么现象
dom.on("input",function(){
searchTrigger($(this));
});
function searchTrigger(self){
//此处处理搜索事件
}
- 单独使用input搜索,安卓端没问题,在ios中文状态下会输入英文
input,compositionstart,compositionend 一起使用
let flag=true;
dom.on({
compositionstart: function () {
flag = true;
},
compositionend: function () {
flag = false;
},
input: function (e) {
let self = $(this);
setTimeout(function () {
if (!flag) {
searchTrigger(self);
}
},0);
});
function searchTrigger(self){
//此处处理搜索事件
}
- 此种情况既解决了中文输入的问题,有解决ios在ios中文状态下会输入英文的问题
- 因为compositionend会在input之后触发,所以用定时器去延迟input触发
- 但是此种方法在安卓端搜索会发生以下问题
- 无法达到实时触发,
- 不生效
取消定时器,改用compositionend,input同时触发searchTrigger事件,用flag判断是否进行触发
let flag = false;
dom.on({
compositionstart: function () {
flag = true;
},
compositionend: function () {
flag = false;
searchTrigger($(this));
},
input: function (e) {
searchTrigger($(this));
},
keypress: function (e) {
let self = $(this);
if (e.keyCode == 13) {
flag=false;
searchTrigger(self);
}
}
});
function searchTrigger(self){
if(!flag){
//此处处理搜索事件
}
}
附赠一个本人封装的实时搜索插件
(function ($) {
$.fn.SearcherTrigger = function (opts) {
searchFun($(this), opts);
}
function searchFun(searchDOM, opts) {
var defalutOpts = {
emptySpace: true,//清空空格
delay: true, //是否延时触发搜索
delayTime: 500 //延时触发时间
}
opts = opts || {};
opts = $.extend(defalutOpts, opts);
opts.searchLock = true; //搜索锁
opts.temporaryStorage = ""; //临时存储空间
(function searchBindEvent() {
searchDOM.on('compositionstart', function () {
opts.searchLock = false;
});
searchDOM.on('compositionend', function () {
opts.searchLock = true;
searchTrigger();
});
searchDOM.on("input", function (e) {
e.preventDefault();
searchTrigger();
});
})();
function searchTrigger() {
if (!opts.searchLock) return;
emptySpaceFun();
let searchStoragel = searchDOM.val();
if (!(searchStoragel.length > 1 && opts.temporaryStorage !== searchStoragel)) {
opts.error && opts.error();
return;
}
opts.temporaryStorage = searchStoragel;
delayTrigger();
}
function emptySpaceFun() {
if (!opts.emptySpace) return;
searchDOM.val(searchDOM.val().replace(/[ ]/g, ""));
}
function delayTrigger() {
opts.delay ? setTimeout(function () {
resultTrigger();
}, opts.delayTime) : resultTrigger();
function resultTrigger() {
opts.sucess && opts.sucess(opts.temporaryStorage);
}
}
}
})(jQuery);
调用方式
$("#input").SearcherTrigger({
sucess:function(value){
},
error:function(){
}
})
关于插件,要是有的好的想法,可以留言给我.谢谢.