본문 바로가기
BootStrap/Bootstrap Sample File

HOW TO MAKE AUTOCOMPLETE USING JQUERY UI AND BOOTSTRAP

hookbox 2015. 11. 15. 10:06
In this article I will discuss how to create an application using jquery ui and bootstrapping , the same as the previous article , but here I will discuss how to create jquery ui autocomplete using and bootstrap. 




It works like an application that I have discussed in previous articles , both using jquery ui same and bootstrap . To start the making of this project then you should prepare a plugin of jquery , jquery ui , and the bootstrap , which you can download on their official site.

Once you get the plugin , create a new folder with the name autocomplete or up to you . Copy plugin earlier into the folder that was created , create a new html document also named ' index.html ' in a new folder , as well as in conjunction with the plugin. 




Open the index.html file that was created earlier , then copy and paste the existing syntax below , then the run.

?
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta <span id="IL_AD12" class="IL_AD">charset</span>="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Autocomplete Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <style>
       
    </style>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <p>
</p>
    <div class="container">
      <div class="row">
 <div class="col-xs-6 col-sm-6 col-md-6">
    
  <form role="form">
   <div class="form-group">
     <label for="text"><span id="IL_AD11" class="IL_AD">Single</span></label>
     <input type="text" class="form-control" id="text1" placeholder="Enter Text">
   </div>
   <div class="form-group">
     <label for="text">Multi</label>
     <input type="text" class="form-control" id="text2" placeholder="Enter Text">
   </div>
 </form>
  
 </div>
 <div class="col-xs-6 col-sm-6 col-md-6">
  
  
    
 </div>
      </div>
    </div>
 
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
      $(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"
 ];
  
 //Single
 $( "#text1" ).autocomplete({
   source: availableTags
 });
  
 //Multi
 function split( val ) {
    return val.split( /,\s*/ );
 }
 function extractLast( term ) {
    return split( term ).pop();
 }
 $( "#text2" ).bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
       event.preventDefault();
    }
 }).autocomplete({
     minLength: 0,
     source: function( request, response ) {
       // delegate back to autocomplete, but extract the last term
       response( $.ui.autocomplete.filter(
       availableTags, extractLast( request.term ) ) );
     },
     focus: function() {
       // prevent value inserted on focus
       return false;
     },
     select: function( event, ui ) {
       var terms = split( this.value );
       // remove the current input
       terms.pop();
       // add the selected item
       terms.push( ui.item.value );
       // add placeholder to get the comma-and-space at the end
       terms.push( "" );
       this.value = terms.join( ", " );
       return false;
     }
   });
  
      });
    </script>
  </body>
</html>

Explanation syntax.

1. Making the html document in accordance with the bootstrap code.

?
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Autocomplete Template</title>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <p>
</p>
    <div class="container">
      <div class="row">
 <div class="col-xs-6 col-sm-6 col-md-6">
    
 </div>
 <div class="col-xs-6 col-sm-6 col-md-6">
  
 </div>
      </div>
    </div>
 
  </body>
</html>

2. Dialing plugins you've downloaded and salinkan to the new folder.

?
1
2
3
4
5
6
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
 
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

3. Make of style by using html and css in accordance with the guidelines bootstrap.

?
1
2
3
4
5
6
7
8
9
10
11
12
no style, style with default bootstrap
 
<form role="form">
   <div class="form-group">
     <label for="text">Single</label>
     <input type="text" class="form-control" id="text1" placeholder="Enter Text">
   </div>
   <div class="form-group">
     <label for="text">Multi</label>
     <input type="text" class="form-control" id="text2" placeholder="Enter Text">
   </div>
 </form>

4. Make for motion effects using jquery ui.

?
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
$(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"
 ];
  
 //Single
 $( "#text1" ).autocomplete({
   source: availableTags
 });
  
 //Multi
 function split( val ) {
    return val.split( /,\s*/ );
 }
 function extractLast( term ) {
    return split( term ).pop();
 }
 $( "#text2" ).bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
       event.preventDefault();
    }
 }).autocomplete({
     minLength: 0,
     source: function( request, response ) {
       // delegate back to autocomplete, but extract the last term
       response( $.ui.autocomplete.filter(
       availableTags, extractLast( request.term ) ) );
     },
     focus: function() {
       // prevent value inserted on focus
       return false;
     },
     select: function( event, ui ) {
       var terms = split( this.value );
       // remove the current input
       terms.pop();
       // add the selected item
       terms.push( ui.item.value );
       // add placeholder to get the comma-and-space at the end
       terms.push( "" );
       this.value = terms.join( ", " );
       return false;
     }
   });
  
      });


'BootStrap > Bootstrap Sample File' 카테고리의 다른 글

HOW TO MAKE MODAL (POPUP/DIALOG) USING JQUERY  (0) 2015.11.15
HOW TO CREATE A NAVIGATION MENU DROPDOWNS USING JQUERY  (0) 2015.11.15
HOW TO MAKE ACCORDION USING JQUERY UI AND BOOTSTRAP  (0) 2015.11.15
CRUD (CREATE, READ, UPDATE, DELETE, PAGINATION) USING PHP PDO AND BOOTSTRAP  (0) 2015.11.15
LOGIN SESSIONS USING PHP PDO AND BOOTSTRAP  (0) 2015.11.15

'BootStrap/Bootstrap Sample File' Related Articles

티스토리툴바