pav
10/5/2013 - 12:33 PM

Autocomplete

Autocomplete

script.js
content_copyfile_download
$(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});

});
index.html
content_copyfile_download
<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>
autocomplete-options.js
content_copyfile_download
// 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"
];