如何在jquery中使用autocomplete（）
问题描述 投票：1回答：1
我在使用jquery和自动完成功能时遇到问题。当我开始在搜索过滤器中输入城市时，我会得到我想要的城市，但随后会在顶部弹出消息：1个结果可用，使用向上和向下箭头键进行导航。它确实弄乱了整个页面，我想摆脱它。这是屏幕截图：
body{
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
#container nav ul{
color: navy;
position: absolute;
left: 50%;
top: 5%;
transform: translate(-50%, -5%);
list-style-type: none;
font-size: 15px;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
font-weight: bold;
}
#container nav li{
display: inline-block;
width: 31%;
padding: 1%;
}
#main{
color: midnightblue;
text-align: center;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
}
#main h3{
line-height: 1.5em;
}
img{
width: 100vw;
height: 100vh;
}
form{
text-align: center;
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -20%);
font-size: 40px;
}
form label{
margin-bottom: 7px;
}
form input[type="text"]{
padding: 10px;
border: none;
display: block;
width: 600px;
border-bottom: 2px solid black;
text-align: center;
}
input:focus{
outline: none;
}
button{
color: white;
font-weight: bold;
display: block;
position: absolute;
left: 50%;
top: 65%;
transform: translate(-50%, -65%);
width: 250px;
padding: 12px;
border: none;
background: linear-gradient(70deg, rgba(175,238,238,0.6) 50%, rgba(135,206,250, 0.6) 50%);
letter-spacing: 0.15em;
}
button:hover{
animation: change 0.2s linear forwards;
}
@keyframes change{
from{color: white; font-size: 20px; background: linear-gradient(40deg, rgba(175,238,238,0.1) 50%, rgba(135,206,250, 0.1) 50%);}
to{color: royalblue; font-size: 25px; background: linear-gradient(40deg, rgba(175,238,238,0) 50%, rgba(135,206,250, 0) 50%);}
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="vezovi.css" type="text/css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/icons/favicon-32x32.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('#container, img').fadeOut(500),
$('form').delay(1000).fadeIn(500);
});
let gradovi = ['Rovinj', 'Medulin'];
$('#lokacija').autocomplete({
source: gradovi
});
$('gradovi').css('color', 'red');
});
</script>
</head>
<body>
<img src="https://komarna-croatia.com/wp-content/uploads/2016/04/Sea-Wallpaper-Travel.jpg">
<div id="container">
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c/li>
</ul>
</nav>
<div id="main">
<h1>Cities</h1>
<h3>Click on the button</h3>
</div>
<button style="font-size: 20px; border-radius: 25px;">Klikni ovdje</button>
</div>
<form style="display: none;" method="POST" target="_self" action="lokacija.html">
<label for="lokacija">Enter location</label>
<input type="text" id="lokacija" value="" name="location">
</form>
<!-- <script src="vezovi.js"></script> -->
</body>
</html>还可以设置自动完成选项的样式吗？
1个回答
1
投票
投票
您没有添加Jquery UI样式的CSS文件，您可以转到https://jqueryui.com/themeroller/以自定义样式，请参见下面添加的代码
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
.ui-autocomplete li {
border: 1px solid #003eff;
background: black;
color: red;
font-weight: normal;
}
#container nav ul {
color: navy;
position: absolute;
left: 50%;
top: 5%;
transform: translate(-50%, -5%);
list-style-type: none;
font-size: 15px;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
font-weight: bold;
}
#container nav li {
display: inline-block;
width: 31%;
padding: 1%;
}
#main {
color: midnightblue;
text-align: center;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
}
#main h3 {
line-height: 1.5em;
}
img {
width: 100vw;
height: 100vh;
}
form {
text-align: center;
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -20%);
font-size: 40px;
}
form label {
margin-bottom: 7px;
}
form input[type="text"] {
padding: 10px;
border: none;
display: block;
width: 600px;
border-bottom: 2px solid black;
text-align: center;
}
input:focus {
outline: none;
}
button {
color: white;
font-weight: bold;
display: block;
position: absolute;
left: 50%;
top: 65%;
transform: translate(-50%, -65%);
width: 250px;
padding: 12px;
border: none;
background: linear-gradient(70deg, rgba(175, 238, 238, 0.6) 50%, rgba(135, 206, 250, 0.6) 50%);
letter-spacing: 0.15em;
}
button:hover {
animation: change 0.2s linear forwards;
}
@keyframes change {
from {
color: white;
font-size: 20px;
background: linear-gradient(40deg, rgba(175, 238, 238, 0.1) 50%, rgba(135, 206, 250, 0.1) 50%);
}
to {
color: royalblue;
font-size: 25px;
background: linear-gradient(40deg, rgba(175, 238, 238, 0) 50%, rgba(135, 206, 250, 0) 50%);
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="vezovi.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/icons/favicon-32x32.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
$('#container, img').fadeOut(500),
$('form').delay(1000).fadeIn(500);
});
let gradovi = ['Rovinj', 'Mooo', 'Meeeaw🐱', 'mowmow🐈'];
$('#lokacija').autocomplete({
source: gradovi
});
$('gradovi').css('color', 'red');
});
</script>
</head>
<body>
<img src="https://komarna-croatia.com/wp-content/uploads/2016/04/Sea-Wallpaper-Travel.jpg">
<div id="container">
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</nav>
<div id="main">
<h1>Cities</h1>
<h3>Click on the button</h3>
</div>
<button style="font-size: 20px; border-radius: 25px;">Klikni ovdje</button>
</div>
<form style="display: none;" method="POST" target="_self" action="lokacija.html">
<label for="lokacija">Enter location</label>
<input type="text" id="lokacija" value="" name="location">
</form>
<!-- <script src="vezovi.js"></script> -->
</body>
</html>0
投票
投票
您没有添加Jquery UI样式的CSS文件，您可以转到https://jqueryui.com/themeroller/以自定义样式，请参见下面添加的代码
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
#container nav ul {
color: navy;
position: absolute;
left: 50%;
top: 5%;
transform: translate(-50%, -5%);
list-style-type: none;
font-size: 15px;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
font-weight: bold;
}
#container nav li {
display: inline-block;
width: 31%;
padding: 1%;
}
#main {
color: midnightblue;
text-align: center;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
}
#main h3 {
line-height: 1.5em;
}
img {
width: 100vw;
height: 100vh;
}
form {
text-align: center;
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -20%);
font-size: 40px;
}
form label {
margin-bottom: 7px;
}
form input[type="text"] {
padding: 10px;
border: none;
display: block;
width: 600px;
border-bottom: 2px solid black;
text-align: center;
}
input:focus {
outline: none;
}
button {
color: white;
font-weight: bold;
display: block;
position: absolute;
left: 50%;
top: 65%;
transform: translate(-50%, -65%);
width: 250px;
padding: 12px;
border: none;
background: linear-gradient(70deg, rgba(175, 238, 238, 0.6) 50%, rgba(135, 206, 250, 0.6) 50%);
letter-spacing: 0.15em;
}
button:hover {
animation: change 0.2s linear forwards;
}
@keyframes change {
from {
color: white;
font-size: 20px;
background: linear-gradient(40deg, rgba(175, 238, 238, 0.1) 50%, rgba(135, 206, 250, 0.1) 50%);
}
to {
color: royalblue;
font-size: 25px;
background: linear-gradient(40deg, rgba(175, 238, 238, 0) 50%, rgba(135, 206, 250, 0) 50%);
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="vezovi.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/icons/favicon-32x32.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
$('#container, img').fadeOut(500),
$('form').delay(1000).fadeIn(500);
});
let gradovi = ['Rovinj', 'Medulin'];
$('#lokacija').autocomplete({
source: gradovi
});
$('gradovi').css('color', 'red');
});
</script>
</head>
<body>
<img src="https://komarna-croatia.com/wp-content/uploads/2016/04/Sea-Wallpaper-Travel.jpg">
<div id="container">
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</nav>
<div id="main">
<h1>Cities</h1>
<h3>Click on the button</h3>
</div>
<button style="font-size: 20px; border-radius: 25px;">Klikni ovdje</button>
</div>
<form style="display: none;" method="POST" target="_self" action="lokacija.html">
<label for="lokacija">Enter location</label>
<input type="text" id="lokacija" value="" name="location">
</form>
<!-- <script src="vezovi.js"></script> -->
</body>
</html>最新问题
- 如何加载 16 位 Hugging Face reranker 模型？
- 如何创建每两周一次的 cron 表达式
- Kubernetes：角色与集群角色
- Go Printf 中的位置参数？
- 无法标记正确的元素以在 Python 中使用 Selenium 抓取网站
- 如何获取.net中的cpu信息？
- Inno Setup：显示安装目录，但不允许更改？
- 由于我的 Next 应用程序中存在 CORS 错误，无法进行 Github API 调用
- TKINTER GUI 没有响应
- Intelephense 来自抱怨具体接口实现上未定义的方法
- 为什么下面的Python代码中__getattr__会触发__setattr__？
- 我正在使用react-router-dom来创建不同页面的路由，它正在加载除产品页面之外的所有页面
- KMM 中没有 sqldelight android 驱动程序的匹配变体
- 异常值：字段“id”需要一个数字，但得到“创建”[已关闭]
- SQLAlchemy 逆序查询
- CATIA V5 检查装配中零件或空产品的选择
- 向 Realm 对象添加属性时如何进行迁移
- 无法处理 Django 中 ModelMultipleChoiceField 的输入数据
- Spring Boot Vaadin 登录问题：无法验证用户身份
- 如何获取左边缘作为pandas.cut的标签？
© www.soinside.com 2019 - 2024. All rights reserved.