Created
August 17, 2018 16:19
-
-
Save atrandafir/aa301b93db7e9e16536f3bfa0f30a826 to your computer and use it in GitHub Desktop.
Drop Down Menu/Text Field in one jQuery autocomplete based solution
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>jQuery UI Autocomplete - Scrollable results</title> | |
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> | |
<link rel="stylesheet" href="/resources/demos/style.css"> | |
<style> | |
.ui-autocomplete { | |
max-height: 100px; | |
overflow-y: auto; | |
/* prevent horizontal scrollbar */ | |
overflow-x: hidden; | |
} | |
/* IE 6 doesn't support max-height | |
* we use height instead, but this forces the menu to always be this tall | |
*/ | |
* html .ui-autocomplete { | |
height: 100px; | |
} | |
</style> | |
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> | |
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> | |
<script> | |
$( function() { | |
var availableTags = [ | |
"ActionScript", | |
"AppleScript", | |
"Asp", | |
"BASIC", | |
"C", | |
"C++", | |
"Clojure", | |
"COBOL", | |
"ColdFusion", | |
"Erlang", | |
"Fortran", | |
"Groovy", | |
"Haskell", | |
"Java", | |
"JavaScript", | |
"Lisp", | |
"Perl", | |
"PHP", | |
"Python", | |
"Ruby", | |
"Scala", | |
"Scheme" | |
]; | |
$( "#tags" ).autocomplete({ | |
// source: availableTags, // uncomment this and comment the following to have normal autocomplete behavior | |
source: function (request, response) { | |
response( availableTags); | |
}, | |
minLength: 0 | |
}).focus(function(){ | |
// $(this).data("uiAutocomplete").search($(this).val()); // uncomment this and comment the following to have autocomplete behavior when opening | |
$(this).data("uiAutocomplete").search(''); | |
}); | |
} ); | |
</script> | |
</head> | |
<body> | |
<div class="ui-widget"> | |
<label for="tags">Tags: </label> | |
<input id="tags"> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment