◇jQueryのautocompleteサンプル：メモ
[補完情報セット－１]または[補完情報セット－２]ボタンを押した上で、下のテキストボックスに a をタイプしてみてください。
候補が出て、選択できます（残念ながらcocolog表示ではIEでは候補の出る位置がおかしくなるようです。firefox,Chromeは大丈夫でした）
候補は下リストのplanetsまたはatomsがセットされます。
<!DOCTYPE html> <!-- saved from url=(0014)about:internet --> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script src="../../../js/jquery.js" type="text/javascript"></script> <link href="../../../css/jquery-ui-1.8.10.custom.css" rel="Stylesheet" type="text/css"> <script src="../../../js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> function setCandi(target_,candi_,onSelectFunc_){ var _param= { source : candi_, // 入力候補リスト(またはAjax-url) minLength: 1, // リストを表示するための最小文字数 delay : 10, // キー入力からリスト表示までのミリ秒 select : onSelectFunc_// 選択されたときに呼ばれる関数 }; $("#"+target_).autocomplete(_param); } var planets = ['Mercury','Venus','Earth','Mars','Jupiter' ,'Saturn','Uranus','Neptune','Pluto']; var atoms = ['Hydrogen','Helium','Lithium','Beryllium','Boron' ,'Carbon','Nitorogen','Oxygen','Fluorine','Neon' ,'Sodium','Magnesium','Alminium']; function setPlanets(){ setCandi("text_part",planets,onSelect); } function setAtoms(){ setCandi("text_part",atoms,onSelect); } function clearCandi(){ setCandi("text_part",[],onSelect); } function onSelect(event_, ui_){ alert(event_.target.id+" : "+ui_.item.value); return true; } </script> </head> <body> <input type=text id="text_part"></input><br> <input type=button onClick="setPlanets();" value="補完情報セット－１"> <input type=button onClick="setAtoms();" value="補完情報セット－２"> <input type=button onClick="clearCandi();" value="補完情報消去"> <script type="text/javascript"> setPlanets(); // 初期値設定 </script> </body> </html>
jQueryのautocompleteサンプル
jQueryのautocompleteを使かうサンプルです。
autocompleteは<input type=text>要素に入力の補完機能を与えるものです。
サンプルは次の考えで作成しています。
- 候補は画面出力後にダイナミックに切り替える
- 選択イベントを取得し、<input text>インスタンスと選択された文字列を得る
- ダイナミックに候補を削除する
- クロージャは使わない
- jQuery要素は単なる部品として用い、jQuery風コーディングスタイルはとらない
jQueryのautocomplete機能は<input text>に対してキー入力イベントの ハンドリングを付加するよって実装されています。
jQueryの関数$(#xx).autocomplet()を使わず、直接inputインスタンスに
autocomplete()関数を呼ぶ形では動きません。
$()の引数は要素のidの前に"#"を付ける必要があります。
autocompleteの引数には次の指定が出来ます。
| source | 配列をセットすると候補文字列の並びとみなされます。 文字列をセットすると候補取得urlとみなされます（詳細はいずれ) |
| minLength | リストを表示するための最小文字数 例えば３を設定すると２文字までは候補を出しません |
| delay | キー入力後候補を出すまでの時間をミリ秒で指定 |
| select | 選択されたときに呼び出される関数を指定 関数の引数はeventとuiで event.targetに対象となる<input text>要素が入り, ui.item.valueに変更される値が入ります。 <input text>にonChangeを設定しても、変更前にイベントが 発生するため変更値を取得できないことに注意が必要です |
なお、このサンプルではcocolog上にjqueryライブラリを置いて動かしていますが 必要に応じ本家からダウンロードしてください。
補足
Javascriptの定義参照は時系列での先出参照です。記述上のstaticな並びではなく 動作が行われる時点で定義されていれば参照できます。この例では onSelect関数は記述上は後ろにありますが、参照動作は、onSelect関数部 が読み込まれた後で行われますので参照可能です。
最後に置いてある<script>ブロックは初期化用です。ターゲットとなる<input> が読み込まれた後になければなりません。初期補完情報が不要の場合省略できます。
命名規則：この例では引数は後ろにアンダースコアを付け、ローカル変数には 前にアンダースコアを付けています。
クロージャの使用は必要最低限にとどめるべきだと考えています。
使っていけないわけではなく、本ブログの記事では、
◆CANVASを用いたHTMLスライダー
のhiSlider.js内でインスタンス毎のイベント処理を設定するために
用いています。ただし、クロージャでの処理記述は手短にしてあります
this.canvas.onmousedown=function(e){_this.mouseDown(e);}
補足-2:jQueryのタブ切り替えとの共存は出来ない？
今の所、
ui.core.js,ui.tabs.js,ui.tabs.css
を用いた「タブ切り替え」はautocompleteの
jquery-ui-1.8.10.custom.js
を読み込むとレイアウトが壊れて
しまい、共存はできないようです。（調査不足かもしれません）
suggest.jsによるオートコンプリート
jqueryの他にも
http://www.enjoyxstudy.com/javascript/suggest/にあるsuggest.jsでも実現できます。
次の動作が得られます。
suggest.jsにイベント呼び出しの修正を施し、次のようなコードで呼んでいます。詳しくは 本家の説明を参照してください。
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="../suggest.js"
type="text/javascript"></script>
<style type="text/css">
.suggest {
position: absolute;
background-color: #FFFFFF;
border: 1px solid #CCCCFF;
width: 252px;
}
.suggest div {
padding: 1px;
display: block;
width: 250px;
overflow: hidden;
white-space: nowrap;
}
.suggest div.select{
color: #FFFFFF;
background-color: #3366FF;
}
.suggest div.over{
background-color: #99CCFF;
}
</style>
</head>
<body>
<div >
<input id="text_part" type="text" name="pattern"
value="" autocomplete="off" size="40" style="display: block"/>
<div id="suggest_part" class="suggest" style="display:none;"></div>
</div>
<script type="text/javascript">
function setCandi(target_,suggest_,candi_,onSelectFunc_){
var suggest = new Suggest.Local(target_,suggest_, candi_);
suggest.onSelect= onSelectFunc_;
}
var planets = ['Mercury','Venus','Earth','Mars','Jupiter'
,'Saturn','Uranus','Neptune','Pluto'];
var atoms = ['Hydrogen','Helium','Lithium','Beryllium','Boron'
,'Carbon','Nitorogen','Oxygen','Fluorine','Neon'
,'Sodium','Magnesium','Alminium'];
function setPlanets(){
setCandi("text_part","suggest_part",planets,onSelect);
}
function setAtoms(){
setCandi("text_part","suggest_part",atoms,onSelect);
}
function clearCandi(){
setCandi("text_part","suggest_part",[],onSelect);
}
function onSelect(id,value){
alert(id+":"+value);
return true;
}
</script>
<!--<input type=text id="text_part"></input><br>-->
<input type=button onClick="setPlanets();" value="補完情報セット－１">
<input type=button onClick="setAtoms();" value="補完情報セット－２">
<input type=button onClick="clearCandi();" value="補完情報消去">
<script type="text/javascript">
setPlanets(); // 初期値設定
</script>
</body>
</html>
suggest.jsに施した修正は
・メンバ変数にonSelect追加
this.input = this._getElement(input);
this.suggestArea = this._getElement(suggestArea);
this.candidateList = candidateList;
this.oldText = this.getInputText();
this.onSelcect=null;
if (arguments[3]) this.setOptions(arguments[3]);
と
・moveEndでonSelect呼び出し
moveEnd: function() {
if (this.input.createTextRange) {
this.input.focus(); // Opera
var range = this.input.createTextRange();
range.move('character', this.input.value.length);
range.select();
} else if (this.input.setSelectionRange) {
this.input.setSelectionRange(this.input.value.length, this.input.value.length);
}
if( this.onSelect ) this.onSelect(this.input.id,this.input.value);
},
の２点です
| 固定リンク