- <style>*{ margin: 0; padding: 0; } form{ position: relative; } .text{ width:300px; border: 1px solid #FFCC00; line-height: 40px; outline:none; } .sub{ width: 50px; line-height: 40px; background:#FFCC00 ; /*border: none;*/ position: absolute; top: 0; left:302px; border: 1px solid #FFCC00; outline:none; } ul{ list-style: none; } #list{ width: 300px; border: 1px solid #FFCC00; border-top: none; position: absolute; top: 42; left: 0; } #list span{ color: #666666; font-size: 14px; } li a{ text-decoration: none; color: #000000; }</style></head>
- <body>
- <form action="javascript:;" method="post" name="form">
- <input type="text" name="ttt" class="text" />
- <input type="submit" value="搜索" class="sub" /></form>
- <ul id="list">
- <!--<li><span>3 件 </span></li>--></ul>
- </body>
- <script>var form = document.forms['form'];
- var ttt = form.elements['ttt'];
- var list = document.querySelector('#list');
- function callback(data) {
- data.result.forEach((v) =>{
- console.log(v);
- var newli = document.createElement('li');
- newli.innerhtml = '<span>' + v[0] + '</span>';
- list.appendChild(newli);
- })
- };
- ttt.oninput = function() {
- list.style.display = 'block';
- // console.log(this.value);
- var script = document.createElement('script');
- script.src = 'https://suggest.taobao.com/sug?code=utf-8&q=' + this.value + '&_ksTS=1524732732633_992&callback=callback&k=1&area=c2c&bucketid=5';
- document.body.appendChild(script);
- };
- ttt.onblur = function() {
- list.style.display = 'none';
- ttt.value = '';
- }
- </script>
来源: http://www.bubuko.com/infodetail-2576165.html