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

运行效果如下：

html代码：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