index.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!doctype html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  3. <link href='dist/horsey.css' rel='stylesheet' type='text/css' />
  4. <link href='example/example.css' rel='stylesheet' type='text/css' />
  5. <title>js输入框自动完成代码</title>
  6. <!--<script src="/demos/googlegg.js"></script>-->
  7. <h1>js输入框自动完成代码</h1>
  8. <div class='examples'>
  9. <div class='parent'>
  10. <label for='hy'>Enter the name of a fruit: </label>
  11. <input id='hy'/>
  12. <pre>
  13. <code>
  14. horsey(document.querySelector('input'), {
  15. suggestions: ['banana', 'apple', 'orange']
  16. });
  17. </code>
  18. </pre>
  19. </div>
  20. </div>
  21. <div class='parent'>
  22. <label for='ly'>Lazy load the fruits, useful for AJAX! <i>(loading starts when the field is focused)</i></label>
  23. <div><i id='lyr'>Being lazy...</i></div>
  24. <input id='ly'/>
  25. <pre>
  26. <code>
  27. horsey(document.querySelector('input'), {
  28. suggestions: function (done) {
  29. setTimeout(function () {
  30. done(['banana', 'apple', 'orange']);
  31. }, 2000);
  32. }
  33. });
  34. </code>
  35. </pre>
  36. </div>
  37. <div class='parent'>
  38. <label for='kv'>You can also use "key value pairs": </label>
  39. <input id='kv'/>
  40. <pre>
  41. <code>
  42. horsey(document.querySelector('input'), {
  43. suggestions: [
  44. { value: 'banana', text: 'Bananas from Amazon Rainforest' },
  45. { value: 'apple', text: 'Red apples from New Zealand' },
  46. { value: 'orange', text: 'Oranges from Moscow' },
  47. { value: 'lemon', text: 'Juicy lemons from Amalfitan Coast' }
  48. ]
  49. });
  50. </code>
  51. </pre>
  52. </div>
  53. </div>
  54. <script src='dist/horsey.js'></script>
  55. <script src='example/example.js'></script>
  56. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  57. <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
  58. <p>来源:<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
  59. </div>