实现input框自动填充效果
html
<input class="search-txt" type="text" name="search-txt" placeholder="请输入">
<div class="search-top-index-box">
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
js逻辑
1、监听input框输入的值val
2、根据输入的val发送请求
3、采用loadsh插件,控制输入时频繁发送请求问题
$('.search-txt').on('input', function(){
let val = $(this).val().trim();
searchAction(val)
}
});
let searchAction=_debounce(val=>{
$.ajax({
url:`http://localhost:3090/relate?keyword=${val}`
type:"get"
dataType:"json"
}).then(res=>{
for(let i=0;i<res.length;i++){
let item=res[i]
let a=$("<a href=''></a>")
a.attr('href','https://www.xxxxx.com/search/index?search='+item)
$(".search-top-index-box").append(a.text(item))
}
},err=>{
console.log(err)
})
},600)