GOOCODE - Find your code/scripts

8 When we input forms, such as entering the mail name and the next words are autocompleted, the content will automatically shown and several commonly used mailboxes are listed, and the user simply selects what he will enter. Inputs in this case are time, and domain names. All this can be done automatically by the plug-completer to help you achieve.



HTML
First, load the jQuery library and plugin completer.js, of course, the relevant CSS style file, which are in the source download in the packaged good.

<script src="jquery.js"></script> 
<script src="completer.js"></script> 
<link  href="completer.css" rel="stylesheet"> 

Next we need to place on the page input box where to place the following code, which is a requirement for the user to enter input form mailbox.

<input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail"> 

javascript
Direct $ (element) .completer () call is very simple, if you do not want to be using the data-toggle = "completer" and data- * attribute with the function call in the element to invoke plug-in effects.

$(function(){
	$("#auto-complete-email").completer({
		separator: "@",
		source: ["hotmail.com", "foxmail.com", "gmail.com", "amazon.com", "icloud.com"]
	});
	$("#auto-complete-time").completer({
		filter: function(val) {
			val = val.replace(/\D/g, "").substr(0, 2);

			if (val) {
				val = parseInt(val, 10) || 0;
				val = val > 23 ? 23 : val < 10 ? "0" + val : val;
			}

			return val;
		},
		separator: ":",
		source: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]
	});
	
	var $autoCompleteDomain = $("#auto-complete-domain"),
	$autoCompleteGo = $("#auto-complete-go");

	$autoCompleteDomain.completer({
		complete: function() {
			var url = "http://www." + $autoCompleteDomain.val();

			$autoCompleteGo.attr("href", url);
		},
		separator: ".",
		source: ["com", "net", "org", "co", "io", "me", "hk", "pl"]
	});

});

Setting Options
Completer widget provides a rich set of options and method calls.
complete
Type: Function
Default: function() {}
Will be run when complete.

itemTag
Type: String
Default: 'li'
The element tag of list item.

filter
Type: Function
Default: function(val) { return val }
The function will be passed the input value and run before show the list.

position
Type: String
Options: 'top', 'right', 'bottom' and 'left'
Default: 'bottom'
The position of the container.

source
Type: Array
Default: []
The source data for complete or suggest.

selectedClass
Type: String
Default: 'completer-selected'
A jQuery selector string, highlight the item when it's selected.

separator
Type: String
Default: ''
This will be added between the value and attachment.

suggest
Type: Boolean
Default: false
Set it true to start the suggestion mode.

More details you can see https://github.com/fengyuanchen/completer.