AutoCompleteInputField

• 絞り込み機能付きドロップダウンリスト（オートコンプリート）コンポーネント

  このコンポーネントは、ユーザーがテキストフィールドに何かを入力すると、その入力値を含む項目のみをドロップダウンリストに表示します。

  また、リストから直接項目を選択することも可能です。

コンポーネントのポイントと説明

1. AutocompleteInputProps インターフェース:

   • options: string[]: ドロップダウンに表示する選択肢の配列です。

   • placeholder?: string: 入力フィールドのプレースホルダーです。

   • onSelect?: (value: string) => void: ユーザーがリストから項目を選択したときに呼び出されるコールバック関数です。選択された値が引数として渡されます。

2. State管理:

   • inputValue: 現在の入力フィールドのテキスト値を保持します。

   • filteredOptions: inputValueに基づいて絞り込まれた選択肢の配列を保持します。

   • isOptionsVisible: ドロップダウンリストが表示されているかどうかを制御します。

3. useEffect (クリックイベントリスナー):

   コンポーネントの外側をクリックした場合に、ドロップダウンリストを非表示にするために使用します。これは、useRef を使ってコンポーネントのラッパー要素への参照を取得し、イベントのターゲットがその要素内に含まれているかどうかをチェックすることで実現します。

4. handleInputChange:

   入力フィールドの値が変更されるたびに呼び出されます。

   setInputValue で入力値を更新し、その値を使ってoptionsをフィルタリングします。toLowerCase() を使って大文字・小文字を区別しない検索を行っています。

   入力がある場合はisOptionsVisibleをtrueにし、候補リストを表示します。入力がない場合は、すべての候補を表示します。

5. handleOptionClick:

   ドロップダウンリストの項目がクリックされたときに呼び出されます。

   setInputValue で入力フィールドの値を選択された項目に設定します。

   setIsOptionsVisible(false) でリストを非表示にします。

   onSelect プロパティに関数が渡されていれば、それを呼び出して親コンポーネントに選択された値を通知します。

6. handleInputFocus:

   入力フィールドにフォーカスが当たったときにリストを再表示するために使用します。これにより、入力がない状態でもフォーカス時に全候補が表示されます。

7. handleKeyDown:

   Enterキーが押された場合に、現在の入力値と正確に一致するオプションがあるかを確認し、あればそのオプションを選択します。

8. autoComplete="off":

   これは非常に重要です。ブラウザのデフォルトのオートコンプリート機能が干渉するのを防ぎ、コンポーネントのカスタムオートコンプリート機能が意図した通りに動作するようにします。

9. CSS (AutocompleteInput.css):

   ドロップダウンリストの見た目を整えるための基本的なスタイルが含まれています。必要に応じて自由にカスタマイズしてください。特にposition: absolute;とz-index: 100;は、リストが他のコンテンツの上に適切に表示されるために重要です。

このコンポーネントは、ReactとTypeScriptを使って、使いやすく、機能的で、カスタマイズ可能なオートコンプリート入力フィールドを提供します。