How To: Create auto-complete using jquery and css

By /

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

Enter Name :

 

Prashant
Arun
Sunny
Girish
Vikas
Raghubir
Sameer
John
Steve
Ember
Nichole
Tom

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

  $( 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() { $( '
' + $(this).parent().text().substr(1) + '' ).appendTo( '.list_name' ); $( this ).parent().remove(); });
  $('.list_name p').live( 'click', function() { $('x'+this.innerHTML+'').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!!

Scroll to Top