91 lines
2.1 KiB
JavaScript
91 lines
2.1 KiB
JavaScript
import {
|
|
Paper,
|
|
TextField,
|
|
Stack,
|
|
Popper,
|
|
Avatar,
|
|
Typography,
|
|
Card,
|
|
InputAdornment
|
|
} from "@mui/material";
|
|
|
|
import SearchIcon from "@mui/icons-material/Search";
|
|
|
|
import React from "react";
|
|
|
|
export default class Content extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
searchtext:'',
|
|
result:[],
|
|
anchorEl:null
|
|
};
|
|
}
|
|
|
|
|
|
handleSearch = (searchtext) => {
|
|
if(searchtext.trim().length > 2){
|
|
this.props.socket.emit('search',searchtext,(err,res)=>{
|
|
if(!err){
|
|
this.setState({ result:res });
|
|
console.log(res);
|
|
}
|
|
else{
|
|
console.log('Err',err);
|
|
this.setState({ result:[] });
|
|
}
|
|
});
|
|
}
|
|
else{
|
|
this.setState({ result:[] });
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div style={{ width:'100%'}}>
|
|
<Stack spacing={2}>
|
|
<Card style={{ width:'100%',margin:'20px auto'}} sx={{ maxWidth: 'sm' }}>
|
|
<TextField
|
|
spellCheck={false}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment>
|
|
<SearchIcon style={{ marginRight:'20px'}}/>
|
|
</InputAdornment>
|
|
)
|
|
}}
|
|
value={this.state.searchtext}
|
|
inputRef={(input) => {input && input.focus()}}
|
|
onChange={(e) => {
|
|
this.setState({ anchorEl:e.target,searchtext: e.target.value });
|
|
this.handleSearch(e.target.value);
|
|
}}
|
|
autoComplete="off"
|
|
fullWidth
|
|
/>
|
|
</Card>
|
|
<Popper
|
|
open={this.state.result.length > 0}
|
|
anchorEl={this.state.anchorEl}
|
|
placement={'bottom-start'}
|
|
>
|
|
<Paper style={{ padding: 20}}>
|
|
<Stack>
|
|
{this.state.result.map((line,i)=>(
|
|
<Stack key={i} direction="row" spacing={2} style={{cursor: 'pointer',userSelect:'none'}} sx={{alignItems: "center"}} onClick={() => { window.location = 'https://t.growheads.de/'+line.cSeo }}>
|
|
<Avatar src={'https://t.growheads.de/media/image/product/'+(line.kArtikel)+'/xs/'+(line.cSeo)+'.jpg'} sx={{ width: 40, height: 40 }} variant="square"/>
|
|
<Typography>{line.cName}</Typography>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Paper>
|
|
</Popper>
|
|
</Stack>
|
|
</div>
|
|
);
|
|
}
|
|
}
|