Skip to content

Instantly share code, notes, and snippets.

@hcmn

hcmn/autocomplete-options.js

Created July 11, 2012 20:11
Show Gist options
  • Save hcmn/3092967 to your computer and use it in GitHub Desktop.
Save hcmn/3092967 to your computer and use it in GitHub Desktop.
Download ZIP
JQuery UI: Autocomplete
Raw
autocomplete-options.js
// This is the array we are going to use for our autocomplete text
// box. Notice, it's just one big array! This one for example is
// filled with a lot of names of programming languages.
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
Raw
index.html
<html>
<head>
<title>Autocomplete!</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css"/>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="autocomplete-options.js"></script>
<script src="script.js"></script>
</html>
Raw
script.js
//autocomplete using JQuery UI
//credit: Benjamin Clifford, Codecademy
$(function() {
//
// Add the code for selecting the #tags input and set the source
// for the autocomplete to be 'availableTags' which are set in
// autocomplete-options.js
$('#tags').autocomplete({
source: availableTags
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment