In this tutorial we will explore the basics of using jQueryUI which allows for some fantastic javascript based user interface elements on websites. We are going to be looking at autocomplete. Have you ever wondered how you could make a search box similar to google where suggestions are made based on what you search? Well, that’s what we’ll do.
Demo of what we are doing.
Before we start anything we’ll need to head over to the jQueryUI website and download a few things. They have a handy tool that helps you download the components that you need. jQueryUI downloads. Once there, you’ll want to select the core elements that we need (as listed on the jQueryUI Autocomplete page). The core elements that we need are:
- Core
- Widget
- Position
- Autocomplete
- A theme (your choice of course on what theme to use)
Once downloaded, we’ll take a few of the files and arrange them into an easy to use format. The rest of the files are examples (copies of the examples on the jQueryUI website including server side code), which you may want to have a look at later.
We’ll only be needing two folders from within the file that was downloaded. The easiest way (folder structure wise) is to have a folder named jQueryUI and within this folder, copy and paste the css and js folder. The other folder you will need is located here: development-bundle > ui > minified. We also want to copy the minified folder.
Your folder structure should now look like this:
- Website
Nice and simple. Now let’s have a look at the code we’re going to be using:
<script type="text/javascript" src="jQueryUI/js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="jQueryUI/js/minified/jquery.ui.core.min.js"></script><script type="text/javascript" src="jQueryUI/js/minified/jquery.ui.widget.min.js"></script><script type="text/javascript" src="jQueryUI/js/minified/jquery.ui.position.min.js"></script><script type="text/javascript" src="jQueryUI/js/minified/jquery.ui.autocomplete.min.js"></script><script type="text/javascript">// <![CDATA[
$(function() {
var searchItems = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#search" ).autocomplete({
source: searchItems
});
});
</script>
</head>
<body>
<input id="search">
</body>
</html> |
The first section is the files that we need to include. AKA, our javascript and css files. The script section is the section that applies the autocomplete function to our input box. And of course we need the input box itself.
The big question with the above code is the script itself. The section between:
<script type="text/javascript"> and </script> |
With this code we firstly have:
$(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" ]; |
This function has one purpose and that is to create an array of values (called searchItems). This array is the source that the autocomplete function will search through.
Next up, we have another small function:
$( "#search" ).autocomplete({ source: searchItems }); |
This function selects the input bo we are dealing with and says that we want to use autocomplete with it. “#search” is the id of the input box we have. Adding .autocomplete is essentially assigning the autocomplete function to this input box. “source: searchItems” is an option availble to us with the autocomplete function as outlined on the jQueryUI website here.
That’s the basics of it all. If you were wanting to then submit the result of this, add in a form and an action and/or button. Check out W3Schools.com form page if you don’t know what I mean.
You are now able to use autocomplete with a local source of data (an array) and in our next tutorial we will cover external data sources.
