php 点击下拉显示内容,php+ajax实现查询下拉内容功能

这篇文章主要介绍了php+ajax实现查询下拉内容功能,结合具体实例形式分析了php结合ajax动态查询功能的相关实现技巧,需要的朋友可以参考下

本文实例讲述了php+ajax实现仿百度查询下拉内容功能。分享给大家供大家参考，具体如下：

运行效果如下：

html代码：

Document

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;

}

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=$("

"+arr[i]+"");

$("#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");

})

a.txt内容：

a,b,c,d,e,f,g

相关推荐：