php ajax实现仿百度查询下拉内容功能示例

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

运行效果如下：

超文本标记语言代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :https://cdn。bootcss。com/jquery/3。2 .1/jquery。量滴js '/脚本样式类型=' text/CSS '正文{ margin 33600padd : 0；}表单{ width : 500 pxmargin :40 px汽车；} .搜索包装{位置：相对；}李{ padd : 0；左填充： 10px列表样式：无；}李：悬停{底色： # CCCcolor: # fffcursor:指针；} #夏拉{ position : absolutetop : 40pxleft : 0；背景-颜色： # c2c2c 2；宽度： 200像素；margin :0 padd : 0；显示器：无；}/样式/床头柜表单操作=' div class=' search-wrap '输入类型=' text ' id=' search ' ul id='莎拉'/ul输入类型=' button ' value=' go ' id=' sousuo ' div id=' SEarVal ' style=' display : inline-block；边框：1 px实心# CCC '/div/div/form/body脚本类型=' text/JavaScript ' var search=$(' # search ')；search.on('input '，function(){ //输入框内容改变发请求$.ajax({ url:'a.txt '，type:'GET '，async:true，data:{value:$('#search ')).val()}，success :函数(数据){ var arr=data。split('，')；控制台。日志；$(' #夏拉')。html(" ")；$.每个(arr，function(i，n){ var OLi=$(' Li ' arr[I]'/Li ')；$(' #夏拉')。append(OLi)；$(' #夏拉')。css('display '，' block ')；}) } });$(' #夏拉')。css('display '，' block ')；//内容改变下拉框显示$('#searVal ').html(search.val()) })函数stopperpagation(e){ if(e . stopperpagation){ e . stopperpagation()；} else { e.cancelBubble=true } } $(文档)。on('click '，function(){ //点击页面的时候下拉框隐藏$(' #夏拉')。css('display '，' none ')；});$(文档)。打开('点击'，' #夏拉li '，function(){ //点击下拉框选项的时候改变输入框的值search.val($(this).text())；$('#searVal ').html($(this).text())；$(' #夏拉')。css('display '，' none ')；})/script/htmla.txt内容：

a、b、c、d、e、f、g更多关于服务器端编程语言(专业超文本预处理器的缩写)相关内容感兴趣的读者可查看本站专题： 《PHP+ajax技巧与应用小结》 、 《PHP网络编程技巧总结》 、 《PHP基本语法入门教程》 、 《php面向对象程序设计入门教程》 、 《php字符串(string)用法总结》 、 《php+mysql数据库操作入门教程》 及《php常见数据库操作技巧汇总》

希望本文所述对大家服务器端编程语言(专业超文本预处理器的缩写)程序设计有所帮助。