1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <style>
7 .demo{
8 position:relative;
9 }
10 .goods{
11 width:500px;
12 height:20px;
13 border:1px solid rgb(196,0,0);
14 outline:0;
15 padding:10px;
16 }
17 .goods::-webkit-input-placeholder { /* WebKit browsers */
18 color: rgb(213,213,213);
19 font-size: 14px;
20 }
21 .goods:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
22 color: rgb(213,213,213);
23 font-size: 14px;
24 }
25 .goods::-moz-placeholder { /* Mozilla Firefox 19 */
26 color: rgb(213,213,213);
27 font-size: 14px;
28 }
29 .goods:-ms-input-placeholder { /* Internet Explorer 10 */
30 color: rgb(213,213,213);
31 font-size: 14px;
32 }
33 .btn{
34 width:150px;
35 height:42px;
36 line-height:42px;
37 color:#fff;
38 position:absolute;
39 left:500px;
40 background-color: rgb(196,0,0);
41 text-align:center;
42 }
43 .tip {
44 display: none;
45 position: absolute;
46 top: 50px;
47 left: 8px;
48 width: 500px;
49 background-color: #fff;
50 border: 1px solid rgb(21,20,20);
51 z-index: 999;
52 margin:0;
53 }
54 .tip dd{
55 margin:0;
56 }
57 .tip a {
58 display: block;
59 font-size: 12px;
60 height: 30px;
61 line-height: 30px;
62 width: 100%;
63 text-align: left;
64 text-indent: 5px;
65 color: rgb(21,20,20);
66 }
67 .tip a:hover {
68 background-color: rgb(196,0,0);
69 color: #fff;
70 }
71 a {
72 text-decoration: none;
73 }
74
75 </style>
76 </head>
77
78 <body>
79 <div class="demo">
80 <input class="goods" type="text" name="team" value="" list="listData" placeholder="search team" id="goods">
81 <a class="btn">搜索</a>
82 </div>
83 <dl id="tip" class="tip">
84 <dd></dd>
85 </dl>
86
87
88 <script>
89
90
91 var datalist = ['男裤','男鞋','男士外套','男士内衣','男袜','男士洗面奶','男士皮带'];
92 var base = '<a href="javascript:;">*</a>';
93 var tip = document.getElementById('tip');
94 var goods = document.getElementById('goods');
95 goods.addEventListener('input',function(){
96 if(this.value) {
97 update(this.value);
98 }
99 else {
100 //没有输入的隐藏掉提示框
101 tip.style.display = "none";
102 }
103 },false);
104
105 //点击推荐的结果 进入。
106 tip.addEventListener('click',function(e){
107 var target = e.target;
108 if(target.tagName === 'A') {
109 goods.value = target.innerHTML;
110 tip.style.display = 'none';
111 }
112 },false);
113
114 //查找数据
115 function update(val) {
116 var arr = [];
117 datalist.map(function(item){
118 if(item.indexOf(val) !== -1) {
119 arr.push(item);
120 }
121 });
122 if(arr.length !== 0) {
123 var len = arr.length;
124 var htmlStr = '';
125 for(var i = 0; i < len; i ) {
126 var temp = base;
127 temp = temp.replace(/\*/,arr[i]);
128 htmlStr = temp;
129 }
130 tip.getElementsByTagName('dd')[0].innerHTML = htmlStr;
131 tip.style.display = "block";
132 }
133 else {
134 tip.style.display = "none";
135 }
136 }
137 </script>
138 </body>
139 </html>
注:参考别人的成果,自己完善后留作学习。
更多专业前端知识,请上 【猿2048】www.mk2048.com