inputに入力された文字列をmysqlと照合させてヒットしたい

下記コードをご覧ください。

Javascript
1let mysql = require("mysql2");
2
3let connection = mysql.createConnection({
4    host : '*****',
5    user : '****',
6    password : '******',
7    database : '****'
8});
9
10let valueWord = document.getElementById("search");
11valueWord.addEventListener("keyup",(e) => {
12    if(e.code === 'Enter'){
13        connection.query({
14            sql:'select * from product_data where 商品名 like ?',
15            values : ['%' + valueWord +'%']
16            },function(error,results) {
17                if(error) throw error;
18                console.log(results);
19            });
20        
21        connection.end(err => {
22            if(err) throw err;
23        });
24    }
25});

※createConnection部分だけは個人情報のため隠しています。

実現したいこと

inputタグで入力した文字列をデータベース(mysql)へ照合させて、ブラウザへ出力する検索機能を作っている。
(アパレルECサイトの検索窓みたいな感じ)
しかし、問題点が二つ。

1,requireはブラウザで使えない
2,サーバー側での処理のため、ブラウザ専用のdocumentでは使えない

試したこと

1,requireはブラウザで使えない
これはbrowserify,webpackを使えば、使用可能と知れた。

2,documentに関しては下記のエラーが鳴った。

document is not defined

documentが定義されてないとのこと。
Next.jsの解決記事は多くあった。
しかし私の場合、Next.jsは使用してない。
とは言え、参考までに下記の記事を参考にコードを書いてみた。
ReferenceError

if(typeof window === 'object'){
    let valueWord = document.getElementById("search");
    valueWord.addEventListener("keyup",(e) => {
    if(e.code === 'Enter'){
        connection.query({

            sql:'select * from product_data where 商品名 like ?',
            values : ['%' + 'valueWord' +'%']
            },function(error,results) {
                if(error) throw error;
                console.log(results);
            });
        
        connection.end(err => {
            if(err) throw err;
        });
    }
});
}

nodeコマンドで実行するが、読み込みが止まって結果が帰って来ない。
何かしらの原因があると思われる。

知りたいこと

・inputに入力した文字を['%' + 'valueWord' +'%']へと入れたい。
・documentが使えないなら、ブラウザで入力した文字列をサーバー側で取得する方法があったりするのか。

念のためにHTMLも載せておきます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>search</title>
8</head>
9<body>
10    <div class="searchArea">
11        <input type="search" name="searchData" id="search">
12    </div>
13    
14    <script src="script.js" type="module"></script>
15</body>
16</html>