使用React.js和Elasticsearch实现。首先使用React.js创建搜索框组件,然后集成Elasticsearch查询功能实现即时搜索功能。代码示例如下:
import React, { useState, useEffect } from 'react';
import { Client } from '@elastic/elasticsearch';
const client = new Client({
node: 'http://localhost:9200',
});
function SearchBar() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
useEffect(() => {
async function getResults() {
const { body } = await client.search({
index: 'contacts',
body: {
query: {
match: {
name: query,
},
},
},
});
setResults(body.hits.hits);
}
getResults();
}, [query]);
function handleChange(event) {
setQuery(event.target.value);
}
return (
<div>
<input type="text" value={query} onChange={handleChange} />
<ul>
{results.map(result => (
<li key={result._id}>{result._source.name}</li>
))}
</ul>
</div>
);
}
export default SearchBar;