datalistから選択した時にテキストボックスの値を取得したい

Question

入力フォームに以下のようなテキストボックスがあります。

<div class="textbox">
  <?php
    $text = Input::post('text', !empty($model->text) ? $model->text : null);
    $attr = array('class'=>'form', 'list'=>'data_list', 'id'=>'text_box', 'required'=>'required');
    echo Form::input('text', $text, $attr);
  ?>
  <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>

ためしたこと

上記のデータリストから値を選択した時に、選択したリストのvalueが挿入され(ているように見え)ますが、
テキストボックスのchangeイベントでは値を取得できませんでした。

datalistから

テスト1を選択する

$(document).ready(function() {
  $("#text_box").change(function() {
    var text_value = $("#text_box").val();
    console.log(text_value);
  });
});

この場合でいうところの「テスト1」を取得したいと思っています。
何卒、お知恵をお借りしたく存じます…。

追記1：マウスクリックで初めて選択した場合に値が取得できませんでした。
(上下キーで選択後、2回目以降のマウスクリック時は取得できています。)
追記2：上下キーでの選択についても、初めの1回は値が取得できていません。
追記3：値が取得できるのはテキストボックスが選択外になったタイミングでした。

inputイベントのウォッチ反映後

・選択した値が変更(BSやキー入力で値が変更)された時には取得できました。
・上記追記1の通り、マウスクリックで選択した場合は値が取得できません。

Answer 1

datalistから選択しただけでは入力途中なので拾えません。
inputイベントをウォッチしてみてください

※以下コピペ

<meta http-equiv="content-type" charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#text_box").on('input',function() {
    var text_value = $(this).val();
    console.log(text_value);
  });
});
</script>

<form>
<input type="text" list="data_list" name="text_box" id="text_box" required>
<datalist id="data_list">
<option value="テスト1">
<option value="テスト2">
<option value="テスト3">
</datalist>
</form>

Comments

[madoka9393]

ご回答いただきましてありがとうございます。
inputイベントをウォッチするよう変更してみたのですが、
追記の通りキー入力による変更時は値が取得できるのですが、
マウスクリックでの選択時にはやはり値を取得することはできませんでした。

[yambejp]

動作環境はなんでしょう？
OSとブラウザの種類、バージョンをしていしてください
私の環境では普通に挙動しています

[madoka9393]

OS：Windows 10 Pro 64bit
ブラウザ：Google Chrome 68.0.3440.84
になります。

[yambejp]

chromeなら間違いないと思うんですが・・・
一応元ソースをコピペしてhtmlに保存して動くように修正しました
そのまま保存して実行しても動作は変わりませんか？

[madoka9393]

失礼いたしました。
例示いただきました通り、datalistのoptionを直書きしたものは上手く動作しました。
ただ、今回頭のコードにあるようにdatalistのoptionを生成させている状態では上手くいきませんでした。
わかりづらい書き方をしてしまい申し訳ないです。

[yambejp]

PHPでdatalistを発生させているなら直書きとかわらないですよ
ajaxで処理しているわけじゃないですよね？
なにか指定がちがうんじゃないでしょうか？

[madoka9393]

＞直書きと変わらない
そうなんですね。存じ上げませんでした。
＞ajaxで処理している
特にそういったことはしていない認識です。
頭のコードにある通り、テーブルのセレクト結果($result)をfor文で回してoptionを作成しているだけです。

$result生成部分は以下のような感じです。
<?php
$dsn等の設定値(省略)

$pdo = new PDO($dsn, $user, $password, $options);
$sql = select文;
$stmt = $pdo->query($sql);
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

[madoka9393]

一つ気になったのは、直書きした時と冒頭のコードとでDevToolsで見たときにdetalistの見え方が違うことです。

直書き(optionの値が見える)
<datalist id="data_list">
<option value="テスト1">
<option value="テスト2">
<option value="テスト3">
</datalist>

生成(optionの値が見えない)
<datalist id="data_list">

</datalist>

[yambejp]

なるほどdatalistが正しく出力されてないだけかもしれませんね

[madoka9393]

そうなんですか…。
プルダウンから選択すること自体はできるのですが、
ちゃんとした状態であればDevTools上でも確認できるはず、ということですね。
因みにですが何か思い当たる原因や回避策はありませんでしょうか…？

Answer 2

自己解決挙動確認を兼ねて

結局datalistではどうしてもうまいこといかなかったため、
選択項目一覧生成部分をajaxとautocompleteを使って実装しました。

$("#text_box").autocomplete({
      source: function(req, resp){
        var term = $("#text_box").val();
        if(term){
          req.term = term;
        }
        $.ajax({
          url: //選択項目一覧をテーブルから取得するメソッド,
          dataType: "json",
          success: function (res){
            if(!res.error){
              let result = res.success;
              resp(result);
            }
          },
          error: function(xhr, textStatus, errorThrown) {
            res([]);
          }
        });
      },
      delay: 500,
      minLength:0,
      autoFocus: false
    }).focus(function(){
      $(this).autocomplete("search", "");
    });

上記で生成した項目については、通常のchangeイベントで変更をキャッチできました。

Comments

[madoka9393]

なるほど、投稿時に解決済みで投稿しないでも後から自己解決に変更したり未解決に戻したりできるのか…。