Blog スタッフブログ

JavaScript WEB制作 システム開発

[jQuery]サジェストの表示と選択の取得

システム開発担当のTFです。

やり方

  • jQueryと、jQUery UI を読み込む
  • autocomplete　を利用しサジェストを表示し、選択を取得する

メモ

通常の配列の場合は設定された文字列が、表示される。
連想配列の場合、labelがあれば、それが表示される。
連想配列で、labalがない場合、functionを用いて、表示設定をする。
selectを設定すれば、サジェストで選択されたデータが入る。

サンプル

<!-- 省略 -->

<!-- jQueryと jQuery UI の読み込み-->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>

<!-- 省略 -->

<!-- サジェストの対象のテキストフォーム-->
<input type="text" id="autocomplete_test">

<!-- 省略 -->

<script>
let words = [
	"Python",
	"Java",
	"C",
	"C++",
	"JavaScript",
	"C#",
	"R",
	"Go",
	"HTML",
	"Swift",
  ];
  
let words2 = [
	{ label: "Python", id: 1 },
	{ label: "Java", id: 2 },
	{ label: "C", id: 3 },
	{ label: "C++", id: 4 },
	{ label: "JavaScript", id: 5 },
	{ label: "C#", id: 6 },
	{ label: "R", id: 7 },
	{ label: "Go", id: 8 },
	{ label: "HTML", id: 9 },
	{ label: "Swift", id: 10 },
	{ label: "JavaScript2", id: 11 },
  ];
  
let words3 = [
	{ name: "Python", id: 1 },
	{ name: "Java", id: 2 },
	{ name: "C", id: 3 },
	{ name: "C++", id: 4 },
	{ name: "JavaScript", id: 5 },
	{ name: "C#", id: 6 },
	{ name: "R", id: 7 },
	{ name: "Go", id: 8 },
	{ name: "HTML", id: 9 },
	{ name: "Swift", id: 10 },
	{ name: "JavaScript2", id: 11 },
	{ name: "JavaScript3", id: 12 },
  ];
  
$(function(){
	$("#autocomplete_test").autocomplete({
		// labelが表示されるので、wordsかwords2 はこちらでOK
		//source: words2,
		// labelがない場合、
		source: function (req, resp) {
			 resp($.map(words3, function (value, key) {
				// 部分一致で、選択ラベル表示
				if (value.name.indexOf(req.term) >= 0) {
					return {
						label: value.name,
						id: value.id,
						data: value,
					};
				}
			}));
		},
		// select 無しでも動くが、選択を取得する際はselectで取得する
		select: function (event, ui) {
		  alert(ui.item.id + ":" +  ui.item.label);
		  
		  // 選択されたデータでなんらかの処理

		  return true; // テキストボックス更新
		  // return false; // テキストボックスが変わらない
		},
	});
});

</script>

<!-- 省略 -->
戻る一覧へ戻る