如何在jquery中使用autocomplete（）

我对jquery和自动完成有问题。当我开始在搜索过滤器中输入一个城市时，我得到了我想要的城市，但随后会在顶部弹出消息说：1个结果可用，使用上下箭头键导航。它真的把整个页面弄乱了，我想把它扔掉。以下是截图：

正文{
字体系列：“Roboto”，无衬线；
填充：0；
保证金：0；
} 
#集装箱导航{
颜色：海军蓝；
位置：绝对位置；
左：50%；
最高：5%；
转换：翻译（-50%，-5%）；
列表样式类型：无；
字体大小：15px；
保证金：0；
填充：0；
文本对齐：居中；
宽度：100%；
字体大小：粗体；
}
#集装箱导航李{
显示：内联块；
宽度：31%；
填充：1%；
}
#主要{
颜色：深蓝；
文本对齐：居中；
位置：绝对位置；
左：50%；
最高：40%；
转换：翻译（-50%，-40%）；
}
#主h3{
线高：1.5em；
}
img{
宽度：100vw；
高度：100vh；
}
形式{
文本对齐：居中；
位置：绝对位置；
左：50%；
最高：20%；
转换：翻译（-50%，-20%）；
字体大小：40px；
}
表格标签{
边缘底部：7px；
}
表单输入[type=“text”]{
填充：10px；
边界：无；
显示：块；
宽度：600px；
底部边框：2件纯黑；
文本对齐：居中；
}
输入：焦点{
大纲：无；
}
钮扣{
颜色：白色；
字体大小：粗体；
显示：块；
位置：绝对位置；
左：50%；
最高：65%；
转换：翻译（-50%，-65%）；
宽度：250px；
填充：12px；
边界：无；
背景：线性梯度（70度，rgba（175238238,0.6）50%，rgba（135206250,0.6）50%）；
字母间距：0.15em；
} 
按钮：悬停{
动画：向前改变0.2s线性；
}
@关键帧改变{
来自{颜色：白色；字体大小：20px；背景：线性渐变（40度，rgba（175238238,0.1）50%，rgba（135206250,0.1）50%）；}
至{颜色：皇家蓝；字体大小：25px；背景：线性渐变（40度，rgba（175238238,0）50%，rgba（135206250,0）50%）；}
}

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（#容器，img'）。淡出（500），
$（‘形式’）.delay（1000）。fadeIn（500）；
}); 
让gradovi=['Rovinj'，'Medulin']；
$（'lokacija'）。自动完成({
资料来源：格拉多维
});
$（'gradovi'）.css（'color'，'red'）；
});

a
b
c/li>

城市
点击按钮
克里克尼·奥夫杰
输入位置

您没有添加Jquery UI样式css文件，您可以自定义您的样式，请参见下面我添加的代码

正文{
字体系列：“Roboto”，无衬线；
填充：0；
保证金：0；
}
.ui自动完成李{
边框：1px实心#003eff；
背景：黑色；
颜色：红色；
字体大小：正常；
}
#集装箱导航{
颜色：海军蓝；
位置：绝对位置；
左：50%；
最高：5%；
转换：翻译（-50%，-5%）；
列表样式类型：无；
字体大小：15px；
保证金：0；
填充：0；
文本对齐：居中；
宽度：100%；
字体大小：粗体；
}
#集装箱导航李{
显示：内联块；
宽度：31%；
填充：1%；
}
#主要{
颜色：深蓝；
文本对齐：居中；
位置：绝对位置；
左：50%；
最高：40%；
转换：翻译（-50%，-40%）；
}
#主h3{
线高：1.5em；
}
img{
宽度：100vw；
高度：100vh；
}
形式{
文本对齐：居中；
位置：绝对位置；
左：50%；
最高：20%；
转换：翻译（-50%，-20%）；
字体大小：40px；
}
表格标签{
边缘底部：7px；
}
表单输入[type=“text”]{
填充：10px；
边界：无；
显示：块；
宽度：600px；
底部边框：2件纯黑；
文本对齐：居中；
}
输入：焦点{
大纲：无；
}
钮扣{
颜色：白色；
字体大小：粗体；
显示：块；
位置：绝对位置；
左：50%；
最高：65%；
转换：翻译（-50%，-65%）；
宽度：250px；
填充：12px；
边界：无；
背景：线性梯度（70度，rgba（175，238，238，0.6）50%，rgba（135，206，250，0.6）50%）；
字母间距：0.15em；
}
按钮：悬停{
动画：向前改变0.2s线性；
}
@关键帧改变{
从{
颜色：白色；
字体大小：20px；
背景：线性梯度（40度，rgba（175，238，238，0.1）50%，rgba（135，206，250，0.1）50%）；
}
到{
颜色：皇家蓝；
字体大小：25px；
背景：线性梯度（40度，rgba（175，238，238，0）50%，rgba（135，206，250，0）50%）；
}
}

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（#容器，img'）。淡出（500），
$（‘形式’）.delay（1000）。fadeIn（500）；
});
让格拉多维=['Rovinj'、'Mooo'、'Meeeawpls accept answerI我现在做了，很抱歉..谢谢洛蒂有什么方法可以让我设计它吗？例如，当我在城市里输入时，我得到的名字是红色的，等等？你可以定制每件事并在现场可视化，然后单击下载主题，然后嵌入css文件，而不是我们添加的jquery ui默认css，试试看告诉我你还需要什么吗？我下载了主题为1.12.1稳定版的jquery 1.7+，下载为zip文件，但我无法在桌面上打开它，只是显示了一系列错误。打开时很好，只需再次下载，如果你只想更改自动完成样式，我编辑了代码再次运行代码段请参见le class
.ui autocomplete li{}
嘿，我应该嵌入html头部的css文件，它位于哪个文件下？现在我提取了，我可以在我的代码编辑器中打开所有文件。它是jquery-ui.css还是jquery-ui.min.css？我将它作为相对路径嵌入？