[jQueryUI]Autocomplete教學

jQueryUI有個Autocomplete可快速實作快選視窗的功能,將基本來源放在陣列就差不多可以使用了。

效果:

 

引用的檔案:

<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

HTML:

<body>
  <button onclick="refresh()">載入更多</button>
  <input id="names">
</body>

Javascript:

  //預設的名稱
  var names = [
    "Aaron",
    "Abbott",
    "Abel",
    "Abner",
    "Alvin",
    "Alvis",
    "Amos",
    "Andre",
    "Andrew",
    "Andy",
    "Angelo",
    "Augus",
    "Ansel",
    "Antony",
    "Antoine",
    "Antonio",
    "Archer",
    "Archibald",
    "Aries",
    "Arlen",
    "Armand",
    "Armstrong",
    "Arno",
    "Arnold",
    "Arthur",
    "Arvin",
    "Asa",
    "Ashbur",
    "Atwood",
    "Aubrey",
    "August",
    "Augustine",
    "Avery"
  ];
  
  //初始化
  $(function() {
    $("#names").autocomplete({
      source: names
    });
  });
  
  //加入新的名稱並重新載入
  function refresh(){
    names.push("Barry");
    names.push("Bartholomew");
    names.push("Bart");
    names.push("Barton");
    names.push("Bartley");
    names.push("Basil");
    names.push("Beacher");
    $("#names").autocomplete('option', 'source', names);
  }

CSS:

  /** 快選清單的樣式 */	
  .ui-autocomplete { 
    height: 200px; 
    overflow-y: auto; 
    overflow-x: hidden;
  }