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'/> <p> horsey(document.querySelector('input'), { suggestions: ['banana', 'apple', 'orange'] }); </p></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'/><p> horsey(document.querySelector('input'), { suggestions: function (done) { setTimeout(function () { done(['banana', 'apple', 'orange']); }, 2000); } }); </p></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、查看效果。
