php 点击下拉显示内容,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

更多关于PHP相关内容感兴趣的读者可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

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

ajax下拉列表模糊,JS仿百度自动下拉框模糊匹配提示
实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 js/jQuery实现类似百度搜索功能 #container { position: absolute; left: ...
Android自定义下拉刷新动画--仿百度外卖下拉刷新
好久没写博客了,小编之前一段时间一直在找工作,从天津来到了我们的大帝都,感觉还不错.好了废话不多说了,开始我们今天的主题吧.现如今的APP各式各样,同样也带来了各种需求,一个下拉刷新都能玩出花样了,前 ...
AJAX实例--根据邮政编号动态获取省，市，县三级地区+仿百度搜索下拉提示
最近一段时间自己一直在学习AJAX,忽然顿悟ajax的强大功能,实在让人吃惊.在接下来的几篇博客里,我将分享在学习过程中,自己写的一些小例子,欢迎大家一起交流学习...欢迎各位拍砖..你的关注是我不断 ...
php ajax二级联下拉菜单,ThinkPHP和Ajax 实现二级联动的下拉菜单
这篇文章主要介绍了关于ThinkPHP和Ajax 实现二级联动的下拉菜单,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下联动菜单的数据存在数据库,可以随时通过对数据库添加删除修改改变菜 ...
php ajax 上拉显示更多,PHP+Ajax点击加载更多内容－这个效果好，速度快，只能点击更多加载，不能滚动自动加载...
这个效果好,速度快,只能点击更多加载,不能滚动自动加载一.HTML部分 ::点击加载更多内容:: 引入jQuery插件和jquery.more.js加载更多插件 jQuery $(function( ...
仿百度的下拉菜单原生js
废话不多说直接上demo 登录微博登录百度登录网易登录设置微博登录百度登录网易登录学术微博登录百度登录网易登录 js如下:注释的是最不用动脑子的想法:没有注释就涉及到闭包的问题, ...
java显示多个地区时钟_Java实现的动态数字时钟功能示例【显示世界时间】
本文实例讲述了java实现的动态数字时钟功能.分享给大家供大家参考,具体如下: 构建: 1. clock继承 jframe 为运行页面 2. clocktext 测试类创建 clock 对象运行效 ...
菜鸟学Java（七）——Ajax+Servlet实现无刷新下拉联动
下拉联动的功能可以说非常的常用,例如在选择省.市等信息的时候:或者在选择大类.小类的时候.总之,下拉联动很常用.今天就跟大家分享一个简单的二级下拉联动的功能. 大类下拉框:页面加载的时候就初始化大类的 ...
linux下不显示光驱,Windows7电脑下不显示光驱盘符的解决方法
众所周知,光驱是在台式机和笔记本便携式电脑里比较常见的一个部件,经常会在windows7系统使用,而在使用过程中,想必有很多人有遇到过电脑不显示光驱盘符的问题吧,如果遇到这样的问题要如何处理呢?下面, ...

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

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

最新文章

热门文章