3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

suggest.jsのsubmit機能を取り戻す方法

Posted at

皆さま,2015年もよろしくお願いいたします。新年一発目はインクリメンタルサーチに関わるこの一本(とか書きながら,このエントリは新年に見られるとは限らんのですな…)

suggest.jsとは

検索をするときに,Google Suggestっぽく入力補完をしてくれるライブラリです。

suggest.js - 入力補完ライブラリ

事前にリストを必要とするので,リストの数が多すぎない時に,ユーザーへの入力補助に便利なツールです。MITライセンスで使用可能です。

submit機能を取り戻す

suggest.jsでインクリメンタルサーチを実装していたのですが,suggest.jsはあくまで入力補助に特化していたので,submit機能はデフォルトではついていませんでした(説明見落としてたらすみません…)。
なので,PHP等で実装するときに,選択後にsubmitまでしたいときにリターンキーを2回叩いたり,選択リストから目的のものをクリックした後に,Submitボタンを押す必要がありました。色々調べていたら,開発者の方が,submit機能を無くすための設定をしていたので,これを無くせば取り戻せそうだということが分かりました-テキストエリアでリターンキーを押した際に、submitイベントの発生を抑止する方法
上記ブログを参照の元,プログラムを眺めたら,ちょこっとの変更で出来たので,ちょこっと紹介します。

リターンキーのsubmit機能を取り戻す。

これは, this._stopEvent(event);をコメントアウトするだけです。
以下,suggest.jsを修正しています。

suggest.js
抜粋
 // key event
  keyEvent: function(event) {

    if (!this.timerId) {
      this.timerId = setTimeout(this._bind(this.checkLoop), this.interval);
    }

    if (this.dispAllKey && event.ctrlKey
        && this.getInputText() == ''
        && !this.suggestList
        && event.keyCode == Suggest.Key.DOWN) {
      // dispAll
      this._stopEvent(event);
      this.keyEventDispAll();
    } else if (event.keyCode == Suggest.Key.UP ||
               event.keyCode == Suggest.Key.DOWN) {
      // key move
      if (this.suggestList && this.suggestList.length != 0) {
 //     ここをコメントに
 //     this._stopEvent(event);
        this.keyEventMove(event.keyCode);
      }
    } else if (event.keyCode == Suggest.Key.RETURN) {
      // fix
      if (this.suggestList && this.suggestList.length != 0) {
//      ここをコメントに
//      this._stopEvent(event);
        this.keyEventReturn();
      }
    } else if (event.keyCode == Suggest.Key.ESC) {
      // cancel
      if (this.suggestList && this.suggestList.length != 0) {
        this._stopEvent(event);
        this.keyEventEsc();
      }
    } else {
      this.keyEventOther(event);
    }
  },

クリックで選択後にsubmit機能を追加

これは,意図的にsubmit機能を与えることで解決させました。
まず,suggest.jsを呼び出しているhtmlのformに名前をつけておきます。
ここでは,"post"としました。

…抜粋…
<form action="results.php" name="post">
  <input id="text" type="text" name="pattern" size="30" value="" autocomplete="off" />
            <div aline="center" id="suggest" style="display:none" tabindex="-1"></div>
   <input type="submit" value="Search" />
    <input type="reset" value="Reset">
</form>

これをsuggest.jsでクリックした際に実行させるようにします。

suggest.js
抜粋
  listClick: function(event, index) {

    this.changeUnactive();
    this.activePosition = index;
    this.changeActive(index);
    post.submit();
    this.clearSuggestArea();
    this.moveEnd();

  },

以上でsubmit機能は,復活&追加できるはずです。
I hope this will be of some help :-)

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?