How To: Create auto-complete using jquery and css


Today I have tried to make auto-complete using jquery and css inspired by facebook. Auto-complete functionality can be used in filling e-mail ids or maybe story tags. The implementation is very easy.

.

Here is the DEMO

.

HTML

Copy the following html just inside body tag of html page.

1
2
3
<h3>Enter Name : </h3>
 
<div id="auto_box"><input type="text" /><div class="list_name none"><p>Prashant</p><p>Arun</p><p>Sunny</p><p>Girish</p><p>Vikas</p><p>Raghubir</p><p>Sameer</p><p>John</p><p>Steve</p><p>Ember</p><p>Nichole</p><p>Tom</p></div></div>

Jquery Code

Copy the following jquery code inside script tag or maybe external js file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js" language="javascript"></script>
	<script type="text/javascript" language="javascript">
		$( function() {
			$('#auto_box input').bind('keyup',function( e ){
		if( e.keyCode == 40 ) {
			if( $( '.highlight' ).length < 1 ) {
				$('.list_name p:first' ).addClass( 'highlight' );
			} else {
				if( $( '.highlight' ).next().length < 1 ) {
					$( '.highlight' ).removeClass( 'highlight' );
					$('.list_name p:first' ).addClass( 'highlight' );
				} else {
					var itsNext = $( '.highlight' ).removeClass( 'highlight' ).next().addClass( 'highlight' );
					if( itsNext.is( ':hidden' ) ) {
						$( this ).trigger( { type : 'keyup', keyCode : 40 });
					} else {
						$( '.highlight' )[0].scrollIntoView();
					}
				}
			}
			return;
		}
		if( e.keyCode == 38 ) {
			if( $( '.highlight' ).length < 1 ) {
				$('.list_name p:last' ).addClass( 'highlight' );
			} else {
				if( $( '.highlight' ).prev().length < 1 ) {
					$( '.highlight' ).removeClass( 'highlight' );
					$('.list_name p:last' ).addClass( 'highlight' );
				} else {
					var itsPrev = $( '.highlight' ).removeClass( 'highlight' ).prev().addClass( 'highlight' );
					if( itsPrev.is( ':hidden' ) ) {
						$( this ).trigger( { type : 'keyup', keyCode : 38 });
					} else {
						$( '.highlight' )[0].scrollIntoView();
					}
				}
			}
			return;
		}
		if( e.keyCode == 13 ) {
			$( '.highlight' ).trigger( 'click' );
			return;
		}
		if( $.trim( this.value ) == '' ) {
			$( '.list_name' ).hide();
			return;
		}
		var strToMatch = this.value;
		$( '.list_name' ).show();
		$( '.list_name p' ).each( function() {
			if( this.innerHTML.toLowerCase().indexOf( strToMatch.toLowerCase() ) > -1 ) {
				$( this ).show();
			} else {
				$( this ).hide();
			}
		});
	});	
 
	function fixScroll() {
		var listContainer = $('#auto_box .list_name' )[ 0 ];
		listContainer.scrollTo( 0, 40 * $( '.highlight' ).prevAll().length );
	}
 
	$('#auto_box' ).click( function() {
		$( 'input', this ).focus();
	});
 
	$( 'span b' ).live( 'click', function() {
		$( '<p>' + $(this).parent().text().substr(1) + '</p>' ).appendTo( '.list_name' );
		$( this ).parent().remove();
	});
 
	$('.list_name p').live( 'click', function() {
		$('<span><b>x</b>'+this.innerHTML+'</span>').insertBefore('#auto_box input');
		$( this ).remove();
	}).live( 'mouseover', function() {
		$( '.highlight' ).removeClass('highlight');
		$( this ).addClass('highlight');
	});
 
 
	});

CSS

Paste the following css code inside the your stylesheet. You may change the style as per your need.

1
2
3
4
5
6
#auto_box{border:1px solid #ccc;padding:5px;}
		#auto_box span b{float:right;margin:3px 0 0 3px;font-size:10px;color:red;cursor:pointer}
		#auto_box span{font-weight:bold;display:inline-block;border:1px solid #eee;padding:0 4px;margin-right:5px;-moz-border-radius:5px;}
		#auto_box input{border:0;}
		.highlight{background:#DFF7FF}
		#auto_box .list_name{overflow-y:scroll;height:200px}

.

Here is the final DEMO

.

Thats all!
Cheers!!

Recently Published

»

Why is Link Building So Important? Read this to understand

Getting a high ranking on search engine results is important to the ...

»

Productivity Tips for Web Developers for Efficient Time Management

The world is full of distractions. Whether you are a work-from-home, ...

»

The Importance of a Good Domain Name

The right domain name can genuinely make or break a business – ...

»

Cloud Strategy of Oracle: Working or Not?

Though Oracle considered cloud strategy as gibberish long before, it ...

»

Some Excellent SEO Tools for Boosting SEO Rankings like Never Before

You could be having a really great-looking website and the niftiest ...

»

How to Promote Your Business by Collecting Instagram Followers – Part 2

Promoting business is not an easy task these days with so many ...

»

Using Instagram to Optimize Your Business – Unfolding the Tricks – Part 1

Instagram is one of the most popular social networking communities ...

»

6 Mobile UX Design Techniques that work

In software development, be it a mobile app or a website, creating ...

»

Importance of website design in online branding

“A brand for a company is like a reputation for a person. You earn ...