如何在 jquery 中使用 autocomplete()

Question

我对 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>

此外，是否可以设置自动完成选项的样式？

Answer 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>

如何在 jquery 中使用 autocomplete()

How to use autocomplete() in jquery

jquery

jquery-ui-autocomplete