js输入框自动完成

1、新建html文档。

2、书写hmtl代码。

<h1>js输入框自动完成代码</h1>

<div class='低祝倘examples'>

 <div class='parent'>

  <label for='hy'>Enter the name of a fruit: </label>

  <input id='hy'/>

  horsey(document.querySelector('input'), {

   suggestions: ['banana', 'apple', 'orange']

   });

 </div>

</div>

<div class='parent'>

 <label for='ly'>Lazy load the fruits, useful for AJAX! <i>(loading starts when the field is focused)</i></label>

 <div><i id='lyr'>Being lazy...</i></div>

 <input id='ly'/>

  horsey(document.querySelector('input'), {

  suggestions: function (done) {

  setTimeout(function () {

 救醒 done(['banana', 'apple', '薪码orange']);

  }, 2000);

  }

  });

</div>

3、书写css代码。

body { background-color: #14204f; margin: 0 auto; max-width: 760px; }

html, body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

body, input, button, textarea { font-family: Georgia, Helvetica; font-size: 17px; color: #ecf0f1; }

textarea { border: none; padding: 10px; width: 100%; background-color: #14204f; min-height: 400px; }

h1 { margin-top: 20px; text-align: center; }

h3 { background-color: rgba(255, 255, 255, 0.2); padding: 20px; text-align: center; }

a, a:hover { color: #ecf0f1; }

pre code { color: #fff; font-size: 18px; }

pre { overflow-x: auto; }

label { display: block; margin-bottom: 15px; }

sub { display: block; margin-top: -10px; margin-bottom: 15px; font-size: 11px; font-style: italic; }

ul { margin: 0; padding: 0; }

.parent { background-color: rgba(255, 255, 255, 0.2); margin: 50px 0; padding: 20px; }

input { border: none; outline: none; background-color: #ecf0f1; padding: 10px; color: #14204f; border: 0; margin: 5px 0; display: block; width: 100%; }

button { background-color: #ecf0f1; color: #14204f; border: 0; padding: 18px 12px; margin-left: 6px; cursor: pointer; outline: none; }

button:hover { background-color: #e74c3c; color: #ecf0f1; }

.nsg-tag { border-color: #14204f; }

.inline { display: inline-block; }

.gh-fork { position: fixed; top: 0; right: 0; border: 0; }

.autofruit { width: 16px; margin-right: 3px; }

#ddl { cursor: pointer; padding: 10px; background-color: rgba(0,0,0,0.1); }

4、书写并添加js代码。

<script src='dist/horsey.js'></script> 

<script src='example/example.js'></script> 

5、代码整体结构。

6、查看效果。