前提
input要素に入力した文字から
Googleのサジェスト(JSON)を取得し、その結果を表示するプログラムを作っています。
実現したいこと
Googleからサジェストを取得した後、結果をすぐに反映させるための方法が分かりません。
自分で試行錯誤してみたのが下のコードなのですが、
ワンテンポ遅れて反映されてしまいます。
自分でもよくわかんなくなってきちゃいました。
どなたかご教授いただけないでしょうか。
該当のソースコード
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="root"></div> </body> </html>
TypeSciprt
import React from 'react'; import {createRoot} from 'react-dom/client'; // // 自分で試行錯誤してみたところ // window.state = { // suggestList: [] // }; // // window.setState = (changes: any) => { // window.state = Object.assign({}, window.state, changes); // }; // interface searchState { searchBoxInput: string; } class Search extends React.Component<{}, searchState> { constructor(props) { super(props); this.state = { searchBoxInput: '', //inputの値 }; this.searchBoxInputChanged = this.searchBoxInputChanged.bind(this); //inputの値が変わった時 } searchBoxInputChanged(event) { //inputの値を更新 this.setState({ searchBoxInput: (event.target as HTMLInputElement).value }); //サジェストを取得するためのscriptタグを作る if (this.state.searchBoxInput === "") return false; let element: HTMLScriptElement = document.createElement('script'); element.src = 'https://www.google.com/complete/search?hl=en&output=toolbar&client=firefox&callback=suggestCallback&q=' + this.state.searchBoxInput; document.body.appendChild(element); element.remove(); } render() { return ( <div> <input type="search" value={this.state.searchBoxInput} onChange={this.searchBoxInputChanged}/> { // window.state.suggestList.map((name, index) => { return <span key={index}>{name}</span> }) } </div> ); } } const container = document.getElementById('root'); const root = createRoot(container); root.render( < Search /> );
補足情報（FW/ツールのバージョンなど）
取得先:https://www.google.com/complete/search?hl=en&output=toolbar&client=firefox&callback=(コールバック関数)&q={キーワード}
0 コメント