upd

package.json

@@ -19,6 +19,7 @@
 		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
 		"@studysync/eslint-plugin-material-ui": "^1.2.1",
 		"async": "^3.2.6",
+		"awesome-debounce-promise": "^2.1.0",
 		"babel-loader": "^9.1.3",
 		"compression": "^1.7.4",
 		"css-loader": "^7.1.2",
@@ -26,7 +27,6 @@
 		"eslint-webpack-plugin": "^4.2.0",
 		"express": "^4.19.2",
 		"html-webpack-plugin": "^5.6.0",
-		"mssql": "^11.0.1",
 		"mysql": "^2.18.1",
 		"react": "^18.3.1",
 		"socket.io": "^4.7.5",

search.js

@@ -202,7 +202,7 @@ function permute(nums) {
 
 function runapp(socket){
 	
-	socket.on("search", (text, callback) => {
+	socket.on("search", (text, offset, callback) => {
 
 		try{
 
@@ -215,8 +215,9 @@ function runapp(socket){
 					queries.push('%'+(per.join('%'))+'%');
 					qstr+= ' OR cName LIKE ? ';
 				}
+				queries.push(offset*10);
 
-				connection.query('SELECT tartikel.kArtikel,cArtNr,cName,cSeo FROM tartikel LEFT OUTER JOIN tartikelpict ON (tartikelpict.kArtikel = tartikel.kArtikel) WHERE 1=2 '+qstr+' limit 15',queries, function (error, results) {
+				connection.query('SELECT tartikel.kArtikel,cArtNr,cName,cSeo FROM tartikel LEFT OUTER JOIN tartikelpict ON (tartikelpict.kArtikel = tartikel.kArtikel) WHERE 1=2 '+qstr+' ORDER BY cName limit 11 OFFSET ?',queries, function (error, results) {
 					if (callback) callback(error,results);
 				});
 

src/Content.js

@@ -6,12 +6,39 @@ import {
 	Avatar,
 	Typography,
 	Card,
-	InputAdornment
+	InputAdornment,
+	IconButton,
+	Grid
 } from "@mui/material";
 
 import SearchIcon from "@mui/icons-material/Search";
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
 
+import AwesomeDebouncePromise from "awesome-debounce-promise";
 import React from "react";
+	
+function searchReal(searchtext,socket,setState,offset){
+	if(searchtext.trim().length > 2){
+		socket.emit('search',searchtext,offset,(err,res)=>{
+			if(!err){
+				if((offset != 0)&&(res.length == 0)){
+					searchReal(searchtext,socket,setState,offset-1)
+				}
+				setState({ result:res,offset:offset });
+			}
+			else{
+				console.log('Err',err);
+				setState({ result:[],offset:0 });
+			}
+		});
+	}
+	else{
+		setState({ result:[],offset:0 });
+	}
+}
+
+const searchDebounced = AwesomeDebouncePromise(searchReal, 150);
 
 export default class Content extends React.Component {
 	constructor(props) {
@@ -20,27 +47,20 @@ export default class Content extends React.Component {
 		this.state = {
 			searchtext:'',
 			result:[],
+			offset:0,
 			anchorEl:null
 		};
 	}
 
-
+	navigateNext = () => {
-	handleSearch = (searchtext) => {
+		const setState = this.setState.bind(this);
-		if(searchtext.trim().length > 2){
+		searchDebounced(this.state.searchtext,this.props.socket,setState,this.state.offset+1);
-			this.props.socket.emit('search',searchtext,(err,res)=>{
+		this.setState({offset:this.state.offset+1});
-				if(!err){
+	}
-					this.setState({ result:res });
+	navigateBefore = () => {
-					console.log(res);
+		const setState = this.setState.bind(this);
-				}
+		searchDebounced(this.state.searchtext,this.props.socket,setState,this.state.offset-1);
-				else{
+		this.setState({offset:this.state.offset-1});
-					console.log('Err',err);
-					this.setState({ result:[] });
-				}
-			});
-		}
-		else{
-			this.setState({ result:[] });
-		}
 	}
 
 	render() {
@@ -51,17 +71,18 @@ export default class Content extends React.Component {
 						<TextField
 							spellCheck={false}
 							InputProps={{
-								startAdornment: (
+								endAdornment: (
-									<InputAdornment>
+									<InputAdornment position="end">
-										<SearchIcon style={{ marginRight:'20px'}}/>
+										<SearchIcon/>
 									</InputAdornment>
 								)
 							}}
 							value={this.state.searchtext}
 							inputRef={(input) => {input && input.focus()}}
 							onChange={(e) => {
-								this.setState({ anchorEl:e.target,searchtext: e.target.value });
+								this.setState({ offset:0,anchorEl:e.target,searchtext: e.target.value });
-								this.handleSearch(e.target.value);
+								const setState = this.setState.bind(this);
+								searchDebounced(e.target.value,this.props.socket,setState,0);
 							}}
 							autoComplete="off"
 							fullWidth
@@ -71,15 +92,28 @@ export default class Content extends React.Component {
 						open={this.state.result.length > 0}
 						anchorEl={this.state.anchorEl}
 						placement={'bottom-start'}
+						style={{ width:'100%'}} sx={{ maxWidth: 'sm' }}
 					>
-						<Paper style={{ padding: 20}}>
+						<Paper style={{ width:'100%',margin:0, padding: 20}} sx={{ maxWidth: 'sm' }}>
-							<Stack>
+							<Stack spacing={1}>
-								{this.state.result.map((line,i)=>(
+								{this.state.result.slice(0, 10).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>
 								))}
+								<Grid container>
+									<Grid item xs={6}>
+									{ (this.state.offset!=0 &&
+										<IconButton onClick={this.navigateBefore}><NavigateBeforeIcon/></IconButton>
+									)}
+									</Grid>
+									<Grid item xs={6}>
+									{ (this.state.result[10] &&
+										<Grid container justifyContent="flex-end"><IconButton onClick={this.navigateNext}><NavigateNextIcon/></IconButton></Grid>
+									)}
+									</Grid>
+								</Grid>
 							</Stack>
 						</Paper>
 					</Popper>