💬

【jQuery UI】autocompleteで項目選択後フィールド内にlabelを表示させる

2022/04/16に公開

コード

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Custom data and display</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    var projects = [
      {
        value: "001",
        label: "test",
      },
      {
        value: "002",
        label: "test",
      },
      {
        value: "003",
        label: "test2",
      }
    ];
    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        console.log("select!!")
        $( "#project-id" ).val( ui.item.value );
        return false;
      }
    })
  });
  </script>
</head>
<body>
<input id="project" />
<input type="hidden" id="project-id" />
</body>
</html>

説明

key value型の値をautocompleteで選択させたい場合。
input type="hidden"にvalue、
inputにlabelを表示するようにしている。
実際にformなどから送信するものはhiddenに設定されたvalueを使う。

こうすることで同名labelだが、keyは違うなどにも対応できる。

参考サイト

データと表示項目のカスタマイズより。

コード

説明

参考サイト

Discussion