Javascript 如何在引导中创建自动完成搜索框？

我正在为一个web应用程序制作一个表单，希望添加一个搜索栏组件，允许用户从列表中自动完成搜索。我无法将HTML、JS和CSS代码集成到同一个HTML文件中

以下是我的表单代码：

<div align="center">
    <div class="col-sm-6">
        <div class="card shadow-lg rounded-lg" style="background-color: rgb(29, 151, 252);">
            <div class = "card-body">
                    <form method="POST">
                        <br />
                        <h3 align="center", style="color: white;">Upload New Video</h3>
                        <br />
                        <div class="form-group">       
                            <input 
                            type="text" 
                            class="form-control" 
                            id="title" 
                            name="title" 
                            placeholder="Enter Video Title"/>
                        </div>
                        <div class="form-group">       
                            <input 
                            type="text" 
                            class="form-control" 
                            id="url" 
                            name="url" 
                            placeholder="Enter Video URL"/>
                        </div>
                        <br />
                        <script>
                            const basicAutocomplete = document.querySelector('#search-autocomplete');
                                const data = ['One', 'Two', 'Three', 'Four', 'Five'];
                                const dataFilter = (value) =&gt; {
                                return data.filter((item) =&gt; {
                                    return item.toLowerCase().startsWith(value.toLowerCase());
                                });
                                };

                                new mdb.Autocomplete(basicAutocomplete, {
                                filter: dataFilter
                                });
                        </script>
                        <style>
                            .input-group {
                                width: auto;
                            }

                            .input-group input,
                            .input-group .form-notch,
                            .input-group .form-notch-trailing {
                                border-top-right-radius: 0 !important;
                                border-bottom-right-radius: 0 !important;
                            }

                            .input-group button {
                                border-top-left-radius: 0 !important;
                                border-bottom-left-radius: 0 !important;
                            }
                        </style>
                        <div align="center">
                            <div class="input-group">
                                <div id="search-autocomplete" class="form-outline">
                                <input type="search" id="form" class="form-control">
                                <label class="form-label" for="form">Search</label>
                                </div>
                                <button type="button" class="btn btn-primary">
                                <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        <div align="center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

上传新视频




const basicAutocomplete=document.querySelector（“#搜索自动完成”）；
常量数据=['1'、'2'、'3'、'4'、'5']；
常量数据过滤器=（值）={
返回数据。筛选器（（项）={
return item.toLowerCase（）.startsWith（value.toLowerCase（））；
});
};
新mdb.自动完成（基本完成{
过滤器：数据过滤器
});
.输入组{
宽度：自动；
}
.输入组输入，
.输入组.窗体凹口，
.输入组.窗体{
边框右上角半径：0！重要；
边框右下半径：0！重要；
}
.输入组按钮{
边框左上半径：0！重要；
边框左下半径：0！重要；
}
搜寻
提交

请让我知道我可以将脚本和样式标记放置在何处，以便搜索栏显示如下： 使用 输入标记中的

autocomplete=“off”

或者做类似的事情

功能自动完成（inp、arr）{
/*autocomplete函数接受两个参数，
文本字段元素和可能的自动完成值数组：*/
无功电流聚焦；
/*当有人在文本字段中写入时执行函数：*/
inp.addEventListener（“输入”，函数（e）{
var a，b，i，val=该值；
/*关闭所有已打开的自动完成值列表*/
closeAllList（）；
如果（！val）{
返回false；
}
currentFocus=-1；
/*创建将包含以下项（值）的DIV元素：*/
a=document.createElement（“DIV”）；
a、 setAttribute（“id”，this.id+“自动完成列表”）；
a、 setAttribute（“类”、“自动完成项”）；
/*将DIV元素作为自动完成容器的子元素追加：*/
this.parentNode.appendChild（a）；
/*对于数组中的每个项*/
对于（i=0；i”+arr[i].substr（0，val.length）+“”；
b、 innerHTML+=arr[i].substr（val.length）；
/*插入将保存当前数组项值的输入字段：*/
b、 innerHTML+=“”；
/*当有人单击项值（DIV元素）时执行函数：*/
b、 addEventListener（“单击”，函数（e）{
/*插入自动完成文本字段的值：*/
inp.value=this.getElementsByTagName（“输入”）[0].value；
/*关闭自动完成值的列表，
（或任何其他打开的自动完成值列表：*/
closeAllList（）；
});
a、 儿童（b）；
}
}
});
/*按键盘上的键执行功能：*/
inp.addEventListener（“向下键控”，函数（e）{
var x=document.getElementById（this.id+“自动完成列表”）；
如果（x）x=x.getElementsByTagName（“div”）；
如果（e.keyCode==40）{
/*如果按下向下箭头键，
增加currentFocus变量：*/
currentFocus++；
/*并使当前项目更加可见：*/
addActive（x）；
}如果（e.keyCode==38）{//up
/*如果按下向上箭头键，
减小currentFocus变量：*/
当前焦点--；
/*并使当前项目更加可见：*/
addActive（x）；
}否则如果（e.keyCode==13）{
/*如果按ENTER键，则阻止提交表单*/
e、 预防默认值（）；
如果（当前焦点>-1）{
/*并模拟单击“活动”项：*/
如果（x）x[currentFocus]。单击（）；
}
}
});
函数addActive（x）{
/*将项目分类为“活动”的函数：*/
如果（！x）返回false；
/*首先删除所有项目上的“活动”类：*/
清除活性（x）；
如果（currentFocus>=x.length）currentFocus=0；
如果（currentFocus<0）currentFocus=（x.length-1）；
/*添加类“自动完成活动”：*/
x[currentFocus].cl