« ♪「新世界より」の冒頭の休みの長さの記憶 | トップページ | □3色色覚は笑顔のために進化した »

◇jQueryのautocompleteサンプル:メモ

[補完情報セット-1]または[補完情報セット-2]ボタンを押した上で、下のテキストボックスに 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="補完情報セット-1">
<input type=button onClick="setAtoms();"   value="補完情報セット-2">
<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 リストを表示するための最小文字数
例えば3を設定すると2文字までは候補を出しません
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="補完情報セット-1">
<input type=button onClick="setAtoms();"   value="補完情報セット-2">
<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);
  },
の2点です

|

« ♪「新世界より」の冒頭の休みの長さの記憶 | トップページ | □3色色覚は笑顔のために進化した »

トラックバック


この記事へのトラックバック一覧です: ◇jQueryのautocompleteサンプル:メモ:

« ♪「新世界より」の冒頭の休みの長さの記憶 | トップページ | □3色色覚は笑顔のために進化した »