サンプルコードで解説！ TypeScript で jQuery Autocomplete を使いこなす
TypeScript で jQuery のオートコンプリートを利用する方法
jQuery の型定義ファイルの導入
TypeScript で jQuery を利用するために、型定義ファイルが必要です。型定義ファイルは、jQuery の関数やプロパティの型情報を提供し、TypeScript の IntelliSense 機能でオートコンプリートやエラーチェックを有効にします。
以下の2つの方法で型定義ファイルを導入できます。
- TypeScript 公式の型リポジトリからインストール
npm install @types/jquery
- jQuery CDN から直接参照
TypeScript ファイルの先頭に以下の行を追加します。
/// <reference path="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.d.ts" />
jQuery UI Autocomplete ウィジェットの設定
jQuery UI Autocomplete ウィジェットを使用して、入力欄にオートコンプリート機能を追加できます。
以下のコードは、基本的な Autocomplete ウィジェットの設定例です。
$(function() {
$("#input").autocomplete({
source: ["item1", "item2", "item3"],
});
});
この例では、#input 要素に Autocomplete ウィジェットを設定し、候補リストとして ["item1", "item2", "item3"] 配列を指定しています。
オプション
Autocomplete ウィジェットには、候補リストの取得方法、表示方法、選択時の処理などをカスタマイズするための様々なオプションが用意されています。
オプションの詳細については、 を参照してください。
TypeScript での型付け
TypeScript では、Autocomplete ウィジェットの設定オプションやイベントハンドラにも型付けを適用できます。
以下のコードは、source オプションに string[] 型を指定し、select イベントハンドラに (event, ui: JQueryUI.AutocompleteUI) => void 型を指定した例です。
$(function() {
$("#input").autocomplete({
source: (request, response) => {
// サーバーから候補リストを取得する処理
$.ajax({
url: "/search",
data: { term: request.term },
success: (data) => {
response(data);
},
});
},
select: (event, ui) => {
console.log(ui.item.value);
},
});
});
- 選択された都市名がコンソールに出力されます。
- 入力欄に「都市名」を入力すると、候補リストとして日本の都市名が自動的に表示されます。
/// <reference path="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.d.ts" />
/// <reference path="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.d.ts" />
$(function() {
const cities = [
"札幌市",
"仙台市",
"東京都",
"名古屋市",
"京都市",
"大阪市",
"広島市",
"福岡市",
];
$("#cityInput").autocomplete({
source: (request, response) => {
const term = request.term.toLowerCase();
const filteredCities = cities.filter((city) => {
return city.toLowerCase().startsWith(term);
});
response(filteredCities);
},
select: (event, ui) => {
console.log(ui.item.value);
},
});
});
HTML コード
以下の HTML コードで、入力欄と候補リストを表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Autocomplete Sample</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">
</head>
<body>
<label for="cityInput">都市名:</label>
<input type="text" id="cityInput" name="cityInput">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="script.ts"></script>
</body>
</html>
説明
selectイベントハンドラで、選択された都市名がコンソールに出力される処理を指定しています。sourceオプションで、候補リストを取得する処理を指定しています。この処理では、citiesリストをフィルタリングして、入力された文字列と一致する都市名のみを候補リストとして返しています。$("#cityInput").autocomplete()で、#cityInput要素に Autocomplete ウィジェットを設定します。cities変数に、日本の都市名リストを格納しています。
- jQuery と jQuery UI のライブラリを事前に読み込む必要があります。
- コードを実行するには、TypeScript コンパイラが必要です。
jQuery UI以外にも、様々な Autocomplete ライブラリが提供されています。例えば、以下のようなライブラリがあります。
これらのライブラリは、それぞれ異なる機能や特徴を持っています。ご自身のニーズに合ったライブラリを選択してください。
カスタムロジックを実装する
Autocomplete の挙動を完全に制御したい場合は、カスタムロジックを実装する方法もあります。
以下のコードは、jQuery UI Autocomplete を使用せずに、基本的な Autocomplete 機能を実装した例です。
$(function() {
const cities = [
"札幌市",
"仙台市",
"東京都",
"名古屋市",
"京都市",
"大阪市",
"広島市",
"福岡市",
];
$("#cityInput").on("input", () => {
const input = $("#cityInput").val().toLowerCase();
const filteredCities = cities.filter((city) => {
return city.toLowerCase().startsWith(input);
});
const list = $("<ul>");
filteredCities.forEach((city) => {
const item = $("<li>").text(city);
item.on("click", () => {
$("#cityInput").val(city);
});
list.append(item);
});
$("#cityInput").parent().append(list);
$(document).on("click", (event) => {
if (!$("#cityInput").parent().is(event.target) && !$("#cityInput").parent().has(event.target)) {
list.remove();
}
});
});
});
このコードでは、以下の処理を行っています。
- クリックイベント以外で発生したクリックイベントを検知すると、候補リストを非表示にします。
- 候補リストのアイテムをクリックすると、入力欄にそのアイテムの文字列が設定されます。
- 候補リストは、入力欄の下に表示されます。
- 入力欄に入力された文字列が変更されるたびに、候補リストを生成します。
この例はあくまでも基本的な実装例であり、必要に応じて様々なカスタマイズを行うことができます。
TypeScript の型システムを活用する
TypeScript の型システムを活用することで、Autocomplete 機能の型安全性を高めることができます。
以下のコードは、source オプションと select イベントハンドラに型付けを行った例です。
$("#cityInput").autocomplete({
source: (request: { term: string }, response: (data: string[]) => void) => {
// サーバーから候補リストを取得する処理
$.ajax({
url: "/search",
data: { term: request.term },
success: (data) => {
response(data);
},
});
},
select: (event: JQuery.Event, ui: JQueryUI.AutocompleteUI) => {
console.log(ui.item.value);
},
});
このように、型付けを行うことで、開発時のエラーを防ぎ、コードの可読性と保守性を向上させることができます。
jquery typescript
