How to use autocomplete() in jquery
Question
I have a problem with jquery and autocomplete. When I start typing a city in a search filter I get the city I want but then the message pops on top saying: 1 result is available, use up and down arrow keys to navigate. It really messes up the whole page and I would like to get rid of it. Here's the screenshot:
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>
Also, is it possible to style autocomplete options?
1 answers
solution1
1 ACCPTED 2020-03-15 20:36:29
you didn't add Jquery UI styling css file , you can got to https://jqueryui.com/themeroller/ to customize you style , see code bellow i added
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to use jquery autocomplete?
How to use a jQuery Autocomplete
How to use JQuery UI autocomplete
how to use source in autocomplete in jquery?
How to use jquery autocomplete with var?
how to use .live with autocomplete in jquery?
How to use jQuery Autocomplete with this webservice?
How to use jQuery autocomplete correctly?
how to use rails3-jquery-autocomplete plugin for multiple words autocomplete
How to use JScrollpane plugin with Jquery UI autocomplete
Related Tags