tutorial #6: Autocomplete

Virtually every online form has an Autocomplete feature to simplify and enhance the user interface experience. As an example, we will use a form with name and city inputs. The city form field will automatically fill in major cities as you type in the information.

(Please Note: the Autocomplete requires jquery.autocomplete.min.js. For more information on this plugin, visit: bassistance.de/jquery-plugins/jquery-plugin-autocomplete)

In this demonstration, you will learn how to build a form with Autocomplete, how to build the jQuery code needed and learn the purpose of each line of code. Also, you will learn how to create and use an Autocomplete form in HTML and CSS.

Below is the demonstration of Autocomplete. Type in a letter and the close matching name of a major city will fill the form field.

The How-To

HTML

                 
<div id="auto-complete">
<form action="null" method="post">

<fieldset>

<input id="name" type="text" placeholder="Your Name" /><br>
<input type="text" id="city" placeholder="Your City"/><br>
<button type="submit" value="add">Add</button>

</fieldset>

</form>
</div>

CSS

#auto-complete input  {
    border: thin solid #155a7a;
    border-radius: 5px;
    color: #363636;
    display: block;
    font-family: Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:16px;
    margin-bottom: 25px;
    padding: 15px;
	width:250px;
	display: inline-block;
}

#auto-complete input:focus  {
	border: #0A4E63 medium solid;
}

 #auto-complete form button {
	border-radius: 8px;
}

.ac_results {
  padding: 0px;
  border: 1px #155a7a solid;
  background:#FFFFFF;
  overflow: hidden;
  z-index: 99999;
}

.ac_results ul {
  width: 100%;
  list-style-position: outside;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ac_results li {
  margin: 0px;
  padding: 10px 5px;
  cursor: default;
  display: block;
  line-height: 16px;
  overflow: hidden;
}

.ac_loading {
  background:url('indicator.gif') #FFFFFF right center no-repeat;
}

.ac_odd {
  background:#EEEEEE;
}

.ac_over {
  background:#155a7a;
  color:#FFFFFF;
}

input {
display: inline-block;
}

jQuery

$(document).ready(function(){
//The functions will be executed, once the page is ready.
 var cities = ['Paris','Los Angeles','Beijing','New York City','Toronto','Stockholm',
'Melbourne','Rio de Janeiro','Boston','Montreal','Mexico City','New Orleans',
'San Francisco','San Diego','Rome','Tel Aviv','Houston','Dublin','Singapore',
'Berlin','Moscow','London', 'Dubai','Las Vegas','Amsterdam', 'Madrid','Tokyo',
'Hong Kong','Sydney','Philadelphia','Chicago','Washington D.C'];
//This an array of cities that will be used.
  $('#city').autocomplete(cities,{
//Selects the "city" attribute, and passes the data through the autocomplete plugin.  
    autoFill: true,
	 //Will Fill the city in the field form.
    selectFirst: true,
	//This will match the letters that the user types.
    width: '240px'//the width of the dropdown.
  });
});//Close.