mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-10 22:48:34 +08:00
87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
/**
|
|
* @file 实现前端文档搜索
|
|
*/
|
|
import React from 'react';
|
|
import Axios from 'axios';
|
|
import SearchBox from '../../src/components/SearchBox';
|
|
|
|
export default class DocSearch extends React.Component {
|
|
docs = [];
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
searchResults: [],
|
|
loadError: false
|
|
};
|
|
this.onSearch = this.onSearch.bind(this);
|
|
this.onSearchCancel = this.onSearchCancel.bind(this);
|
|
}
|
|
componentDidMount() {
|
|
Axios.get(__uri('../docs.json'))
|
|
.then(result => {
|
|
this.docs = result.data.docs;
|
|
})
|
|
.catch(err => {
|
|
this.setState({loadError: true});
|
|
});
|
|
}
|
|
|
|
onSearch(query) {
|
|
query = query.toLowerCase();
|
|
if (query === '') {
|
|
this.setState({searchResults: []});
|
|
return;
|
|
}
|
|
let results = [];
|
|
for (let doc of this.docs) {
|
|
let index = doc.body.indexOf(query);
|
|
|
|
if (index !== -1) {
|
|
results.push({
|
|
title: doc.title,
|
|
path: doc.path,
|
|
abstract: doc.body
|
|
.substring(Math.max(0, index - 20), index + 60)
|
|
.replace(query, `<strong>${query}</strong>`)
|
|
});
|
|
} else if (doc.title.toLowerCase().indexOf(query) !== -1) {
|
|
results.push({
|
|
title: doc.title,
|
|
path: doc.path,
|
|
abstract: ''
|
|
});
|
|
} else if (doc.path.toLowerCase().indexOf(query) !== -1) {
|
|
results.push({
|
|
title: doc.title,
|
|
path: doc.path,
|
|
abstract: ''
|
|
});
|
|
}
|
|
}
|
|
this.setState({searchResults: results});
|
|
}
|
|
|
|
onSearchCancel() {
|
|
this.setState({searchResults: []});
|
|
}
|
|
|
|
render() {
|
|
const searchResults = this.state.searchResults;
|
|
return (
|
|
<div className="p-l p-t">
|
|
<SearchBox onSearch={this.onSearch} onCancel={this.onSearchCancel} />
|
|
<div className="search-result">
|
|
{searchResults.map(item => {
|
|
return (
|
|
<a href={'/' + item.path} key={`list_${item.path}`}>
|
|
<h5>{item.title}</h5>
|
|
<p dangerouslySetInnerHTML={{__html: item.abstract}} />
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|