For Want Of A Better Word

[js/javascript]セレクトボックスをgoogle検索窓みたいに入力+サジェスト ついでに選択も可能に | magic suggest

      2015/11/14

■magic suggest (bootstrap + jQuery)
http://nicolasbize.com/magicsuggest/examples.html

いろんなパターンがあるみたいだが使いたいのは”Filter box”。
フリー入力なしのやつ。

とりあえずチュートリアルもあるけど英語。

ここがわかりやすいか。
http://rlated.net/magicsuggest/

データをajaxで取ってくるパターンもあるし、
既存のセレクトボックスに当てるというパターンもある模様。
すげー0

とりあえず、最初の最初の準備は下記から。
http://nicolasbize.com/magicsuggest/doc.html
1.ファイルの取得

2.読み込み

 
3.既存のselectBOXに当てる。
・選択した項目は下に表示
・プレイスホルダー変更
・フリー入力なし (前述のfilter状態)
・選択可能は10個まで

 

これでできちゃう。すごい。

ちなみにデータはcakeで受け取るとこんな感じ。

[“フォーム名”]=> array(7) { [0]=> string(1) “4” [1]=> string(1) “6” [2]=> string(1) “5” [3]=> string(1) “8” [4]=> string(1) “3” [5]=> string(1) “2” [6]=> string(1) “1” } }

選択時にjsで下記のようなhiddenを追加している。
<input type=”hidden” name=”item[]” value=”1″>
<input type=”hidden” name=”item[]” value=”2″>….

これでグループで括られると。。

はー便利。

———————
———————
でちょっと問題・

①検索実行後に、前画面での選択状態を引き継ぐ方法。
値はよいかも知れないけど、特に見た目。

フォーム送信、結果表示をAjaxで完結させれば特に問題はないけど、
そういうつくりじゃねーから。

遷移時に値をsseisonなりに保存して、その値を元に画面ロード後にそれぞれをselectedしてあげる感じかな?

②cakeのvalidationのため持ち方の変更が必要。
もらった値をそのまま取得するのではなくて、
③HTML5のvalidationが効かない…
うむむ…

 - bootstrap, javascript | js, jquery

  関連記事

datepicker(カレンダー機能)

datepickerで選択した日付はtextboxなら自動で入る。 カレンダーの …

【JS】メモ_スコープを絞ってその場で実行

良く忘れるのでメモ。 こん中にfunctionを書きまくってもよいぜ。 [cra …

【js】cookieから名前指定で値を取る。

 

jQueryでライブラリを読んだときに、読み込めているかチェック。

特定のページだけでライブラリを読んでいて、でも、実行側のjsは共通部品として入っ …

JSで背景色操作