入力可能なセレクトボックスを実装したい

Question

実現したいこと

タイトルの通り、Webページのフォームに入力可能なセレクトボックスを実装したいと考えています。

現在はFuelPHPで「Form::select」を使用し、
テーブルから取得した値から選択するセレクトボックスで実装されています。

<div class="form">
  <?php
    $array['default'] = '';
    for ($count = 0; $count < count($result); $count++) { //$result:テーブルのセレクト結果
      $array[$result[$count]["id"]] = $result[$count]["name"];
    }
    $text = Input::post('company_name', !empty($model->company_name) ? $model->company_name : null);
    $attr = array('class'=>'form-control', 'id'=>'company_name', 'required'=>'required');
    echo Form::select('company_name', $text, $array, $attr);
  ?>
</div>

このセレクトボックスを、どうにかテキスト入力を許容できるようにできないかと悩んでおります。

期待することは以下の通りです。

• プルダウンからの選択と入力のどちらも行えるようにする
• 選択できる値はテーブルから取得する

皆様のお知恵をお借りしたく存じます。

FuelPHPの機能だけでは難しい、他の手法の方が良い等ありましたらご教示いただきたく。
(jQueryやJavaScriptを使用すれば「入力可能なセレクトボックス」自体は実装できそうなのですが、
セレクトする値をテーブルから取得する方法については当方では調査できていません…)

Answer 1

selectでは実装が難しいので、datalist要素を使ってみてはどうでしょうか？
https://developer.mozilla.org/ja/docs/Web/HTML/Element/datalist

Comments

[madoka9393]

回答いただきましてありがとうございます。
未だ浅学の身であります故、うまいことイメージが掴めないのですが、
こちらをFuelPHPで上手いこと実装するコード例等はありませんでしょうか。

[x_x]

独自の機能はないと思います。自前でHTMLを組み立てることになるでしょう。ヘルパーを作っている人もいるようです。
https://bm-server.net/2015/03/06/237/

[madoka9393]

やはりそうなのですね…。
やりたいことのイメージとしてはこちらが非常に近しく思うので、
datalistをテーブルから取得した値で生成する方法やら含めて少し調べてみたいと思います。

Answer 2

select要素が特定の値のときだけ、隣のinput要素が入力可能になるように組めばいいのでは？
view側のjsでなんとかなりそうな気がしますが、さすがにそういう実装をしたことはありません。

Comments

[madoka9393]

回答いただきましてありがとうございます。
やはりそういった手法を取るしかないですかね…。
ラジオボタンでinputとselectの表示を制御する方法等も考えましたが、
どうにか余計な要素を増やさずに実現できないかとの思いからの質問でした。
デザインやユーザビリティの観点も含め検討してみます。

Answer 3

テーブルから取得した値でdatalistを作成することができましたので、
一先ずx_x様の回答をBAとさせていただきたいと思います。

引き続きいい感じのアプローチがあれば回答お待ちしています。

<div class="hoge">
  <input list="data_list" id="company_name" name="company_name" />
    <datalist id="data_list">
      <?php
        for ($count = 0; $count < count($result); $count++) { // $result:テーブルのセレクト結果
          echo "<option index=" .$result[$count]["id"]. " value=" .$result[$count]["name"]. ">";
        }
      ?>
    </datalist>
</div>