「React.js」react-autocomplete-inputをインストールしてオートコンプリートを実装する

2022年10月2日

環境
Windows 11 Pro 64bit
node v16.16.0
npm 8.11.0
React 18.2.0

操作方法
1.react.js環境を構築します。
「reactapp」という名前でプロジェクトを作成します。

>cd C:\study\react\
>create-react-app reactapp

2.react-autocomplete-inputをインストールします
作成したプロジェクトに移動します
C:\study\react>cd reactapp

react-autocomplete-inputインストール

C:\study\react\reactapp>npm install react-autocomplete-input

3.「src\arkgame.js」に下記コードを記載します。

import React from "react";
import TextInput from 'react-autocomplete-input';
import 'react-autocomplete-input/dist/bundle.css';

const Arkgame = () => {

    return (
        <div>
            <TextInput options={["tokyo", "toho", "titok", "yokohama"]} trigger="" />
        </div>
    );
};

export default Arkgame;

4.「src\App.js」に下記コードを記載します。

import React from 'react';
import Arkgame from './arkgame';
import './App.css';

function App() {
  const style = {
    width: "60%",
    margin: "0 auto",
    marginTop: 140,
  };
  return (
    <div className="App">
      <div style={style}>
       select item: <Arkgame />
      </div>
    </div>
  );
}

export default App;

5.下記のコマンドを実行します

>npm start

6.動作確認
ブラウザから http://プライベートIP:3000にアクセスします。
「t」と入力すると，「tokyo」、「toto」と「titok」が表示されます。