本文实例讲述了php+ajax实现仿百度查询下拉内容功能。分享给大家供大家参考，具体如下：
运行效果如下：
html代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<!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=""> <div class="search-wrap"> <input type="text" id="search"> <ul id="xiala"> </ul> <input type="button" value="go" id="sousuo"> <div id="searval" style="display:inline-block;border:1px solid #ccc"></div> </div> </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内容：
|
1
|
a,b,c,d,e,f,g |
希望本文所述对大家php程序设计有所帮助。
原文链接：http://blog.csdn.net/haibo0668/article/details/78211523
