前言
input输入进行查询,不想输入一个拼音就触发事件,这样会频繁的触发,需要通过输入中文完成后再进行搜索
解决方法 — jquery
var cpLock = true;
$('#search-input').on('compositionstart', function () {
cpLock = false;
});
$('#search-input').on('compositionend', function () {
cpLock = true;
});
$("#search-input").on("input", function (e) {
e.preventDefault();
var _this = this;
setTimeout(function () {
if (cpLock) {
//开始写逻辑
searchValue = $("#search-input").val().trim('');
if (searchValue === '') {
$(".search-result").html('')
} else {
search(searchValue)
}
}
}, 0)
})
解决方法 — vue
<div class="input-warp">
<input type="text" v-model="searchValue" />
<div @click="search"></div>
</div>
export default {
data () {
return {
searchValue: '',
searchArr: []
}
}
watch: {
searchValue: {
handler() {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
this.search();
}, 200)
},
deep: true
}
}
methods: {
search () {
this.isSearch = true;
this.searchValue = this.searchValue.trim('');
if (this.searchValue !== '') {
this.searchList();
} else {
this.searchArr = [];
}
},
searchList () {
axios({
url: ``
}).then(({ data }) => {
this.searchArr = [];
if (this.searchValue === '' || !data.content || !data.content.features.features) {
this.searchArr = [];
return
}
// 查询结果
this.searchArr = data.content.features.features;
}
}
}