/*
捕获用户输入行为
1. 绑定键盘事件-> keydown ,keyup, keypress
2. 绑定输入事件->input
*/
$('#search').bind('input',function(){
// 清除前面的
$('.alart>ul').empty()
// 根据用户输入的内容,动态获取相关提示
var inputValue = $(this).val()
console.log(inputValue)
$.getJSON("server.json",function(data){
$.each(data,function(index,obj){
var name = obj.name
var names = name.indexOf()
// 判断字符串输入的位置 如果没有输入为-1
if(name.indexOf(inputValue) >= 0){
var value = obj.value
$.each(value,function(index,text){
// 拼串
$('.alart>ul').append($('<li>'+text+'<li>'))
})
}
})
})
// 将提示框显示出来
$('.alart').css('display','block')
}).bind('blur',function(){
$('.alart').css('display','none')
})
案例 jquery ajax 搜索框
最新推荐文章于 2023-10-15 20:09:54 发布