Home > Article > Backend Development > php+ajax implements query drop-down content function
php+ajax implements query drop-down content function
- 墨辰丷Original
- 2018-05-17 17:35:272164browse
This article mainly introduces the function of querying drop-down content using php ajax, and analyzes the relevant implementation techniques of php combined with ajax dynamic query function in the form of specific examples. Friends in need can refer to the following
The examples in this article describe PHP ajax implements the function of imitating Baidu query drop-down content. Share it with everyone for your reference, the details are as follows:
The running effect is as follows:
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
form{
width: 500px;
margin:40px auto;
}
.search-wrap{
position: relative;
}
li{
padding: 0;
padding-left: 10px;
list-style: none;
}
li:hover{
background-color: #ccc;
color: #fff;
cursor: pointer;
}
#xiala{
position: absolute;
top: 40px;
left: 0;
background-color: #c2c2c2;
width: 200px;
margin:0;
padding: 0 ;
display: none;
}
</style>
</head>
<body>
<form action="">
<p class="search-wrap">
<input type="text" id="search">
<ul id="xiala">
</ul>
<input type="button" value="go" id="sousuo">
<p id="searVal" style="display:inline-block;border:1px solid #ccc"></p>
</p>
</form>
</body>
<script type="text/javascript">
var search=$("#search");
search.on("input",function(){ //输入框内容改变发请求
$.ajax({
url:'a.txt',
type:'GET',
async:true,
data:{value:$("#search").val()},
success:function(data){
var arr=data.split(',');
console.log(arr);
$("#xiala").html("");
$.each(arr,function(i,n){
var oLi=$("<li>"+arr[i]+"</li>");
$("#xiala").append(oLi);
$("#xiala").css("display","block");
})
}
});
$("#xiala").css("display","block"); //内容改变下拉框显示
$("#searVal").html(search.val())
})
function stopPropagation(e) {
if (e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
$(document).on('click',function(){ //点击页面的时候下拉框隐藏
$("#xiala").css("display","none");
});
$(document).on("click","#xiala li",function(){ //点击下拉框选项的时候改变输入框的值
search.val($(this).text());
$("#searVal").html($(this).text());
$("#xiala").css("display","none");
})
</script>
</html>
a.txt content:
a,b,c,d,e,f,g##Related recommendations:
ThinkPHP Detailed explanation of the steps to update and delete user information query in the framework
Laravel5 implements fuzzy matching and multi-condition query function in detail
thinkPHP5 framework implements paging query Detailed steps
##
The above is the detailed content of php+ajax implements query drop-down content function. For more information, please follow other related articles on the PHP Chinese website!