QHMの新タイプHAIKの活用と実験、オープンソースの活用

[ JQuery ] [ 入力補完01 ] [ 入力補完02 ] [ 入力補完03 ] [ 入力補完04 ]

• 2013-12-23 編集

入力補完01

月の英語名で入力テストします。

ソース

#html{{
<link rel="stylesheet" href="./jquery/css/redmond/jquery-ui-1.10.3.custom.css">
<script src="./jquery/js/jquery-1.9.1.js"></script>
<script src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
 
<style>
ul.ui-autocomplete li a {
 text-align:left;
 color:red;
}
 
</style>
<script>
$(function(){
  var monthlist = [
    'January','February','March','April','May','June',
    'July','August','September','October','November','December',
  ];
 
 
  $( "#ac1" ).autocomplete({
    source:monthlist
  });
});
</script>
 
<input type="text" id="ac1" size="20">

参考URL

• http://jqueryui.com/autocomplete/
• http://js.studio-kingdom.com/jqueryui/widgets/autocomplete

補足

  var monthlist = [
    'January','February','March','April','May','June',
    'July','August','September','October','November','December',
  ];

の候補となる配列変数の定義を別ファイル「aclist.js」にして、

<script src="./aclist.js"></script>

などのようにして読み込んでも良いわけです。

QHM限定になりますが、
別ページ「aclist」を作成し、その内容をhtmlプラグインを利用して次の様に設定しておき、

#html{{
  var monthlist = [
    'January','February','March','April','May','June',
    'July','August','September','October','November','December',
  ];
}}

メインとなるページでは、

#include(aclist,notitle)

と記述して読み込む事もできます。

入力補完02