@@ -67,120 +67,144 @@ Autocomplete instance has following methods:
67
67
There are two ways that you can invoke Autocomplete method. One is calling autocomplete on jQuery object and passing method name as string literal.
68
68
If method has arguments, arguments are passed as consecutive parameters:
69
69
70
- $('#autocomplete').autocomplete('disable');
71
- $('#autocomplete').autocomplete('setOptions', options);
70
+ ``` javascript
71
+ $ (' #autocomplete' ).autocomplete (' disable' );
72
+ $ (' #autocomplete' ).autocomplete (' setOptions' , options);
73
+ ```
72
74
73
75
Or you can get Autocomplete instance by calling autcomplete on jQuery object without any parameters and then invoke desired method.
74
76
75
- $('#autocomplete').autocomplete().disable();
76
- $('#autocomplete').autocomplete().setOptions(options);
77
+ ``` javascript
78
+ $ (' #autocomplete' ).autocomplete ().disable ();
79
+ $ (' #autocomplete' ).autocomplete ().setOptions (options);
80
+ ```
77
81
78
82
##Usage
79
83
80
84
Html:
81
85
82
- <input type="text" name="country" id="autocomplete"/>
86
+ ``` html
87
+ <input type =" text" name =" country" id =" autocomplete" />
88
+ ```
83
89
84
90
Ajax lookup:
85
91
86
- $('#autocomplete').autocomplete({
87
- serviceUrl: '/autocomplete/countries',
88
- onSelect: function (suggestion) {
89
- alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
90
- }
91
- });
92
+ ``` javascript
93
+ $ (' #autocomplete' ).autocomplete ({
94
+ serviceUrl: ' /autocomplete/countries' ,
95
+ onSelect : function (suggestion ) {
96
+ alert (' You selected: ' + suggestion .value + ' , ' + suggestion .data );
97
+ }
98
+ });
99
+ ```
92
100
93
101
Local lookup (no ajax):
94
102
95
- var countries = [
96
- { value: 'Andorra', data: 'AD' },
97
- // ...
98
- { value: 'Zimbabwe', data: 'ZZ' }
99
- ];
100
-
101
- $('#autocomplete').autocomplete({
102
- lookup: countries,
103
- onSelect: function (suggestion) {
104
- alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
105
- }
106
- });
103
+ ``` javascript
104
+ var countries = [
105
+ { value: ' Andorra' , data: ' AD' },
106
+ // ...
107
+ { value: ' Zimbabwe' , data: ' ZZ' }
108
+ ];
109
+
110
+ $ (' #autocomplete' ).autocomplete ({
111
+ lookup: countries,
112
+ onSelect : function (suggestion ) {
113
+ alert (' You selected: ' + suggestion .value + ' , ' + suggestion .data );
114
+ }
115
+ });
116
+ ```
107
117
108
118
##Styling
109
119
110
120
Generated HTML markup for suggestions is displayed bellow. You may style it any way you'd like.
111
121
112
- <div class="autocomplete-suggestions">
113
- <div class="autocomplete-group"><strong>NHL</strong></div>
114
- <div class="autocomplete-suggestion autocomplete-selected">...</div>
115
- <div class="autocomplete-suggestion">...</div>
116
- <div class="autocomplete-suggestion">...</div>
117
- </div>
122
+ ``` html
123
+ <div class =" autocomplete-suggestions" >
124
+ <div class =" autocomplete-group" ><strong >NHL</strong ></div >
125
+ <div class =" autocomplete-suggestion autocomplete-selected" >...</div >
126
+ <div class =" autocomplete-suggestion" >...</div >
127
+ <div class =" autocomplete-suggestion" >...</div >
128
+ </div >
129
+ ```
118
130
119
131
Style sample:
120
132
121
- .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
122
- .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
123
- .autocomplete-selected { background: #F0F0F0; }
124
- .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
125
- .autocomplete-group { padding: 2px 5px; }
126
- .autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
133
+ ``` css
134
+ .autocomplete-suggestions { border : 1px solid #999 ; background : #FFF ; overflow : auto ; }
135
+ .autocomplete-suggestion { padding : 2px 5px ; white-space : nowrap ; overflow : hidden ; }
136
+ .autocomplete-selected { background : #F0F0F0 ; }
137
+ .autocomplete-suggestions strong { font-weight : normal ; color : #3399FF ; }
138
+ .autocomplete-group { padding : 2px 5px ; }
139
+ .autocomplete-group strong { display : block ; border-bottom : 1px solid #000 ; }
140
+ ```
127
141
128
142
129
143
##Response Format
130
144
131
145
Response from the server must be JSON formatted following JavaScript object:
132
146
133
- {
134
- // Query is not required as of version 1.2.5
135
- "query": "Unit",
136
- "suggestions": [
137
- { "value": "United Arab Emirates", "data": "AE" },
138
- { "value": "United Kingdom", "data": "UK" },
139
- { "value": "United States", "data": "US" }
140
- ]
141
- }
147
+ ``` javascript
148
+ {
149
+ // Query is not required as of version 1.2.5
150
+ " query" : " Unit" ,
151
+ " suggestions" : [
152
+ { " value" : " United Arab Emirates" , " data" : " AE" },
153
+ { " value" : " United Kingdom" , " data" : " UK" },
154
+ { " value" : " United States" , " data" : " US" }
155
+ ]
156
+ }
157
+ ```
142
158
143
159
Data can be any value or object. Data object is passed to formatResults function
144
160
and onSelect callback. Alternatively, if there is no data you can
145
161
supply just a string array for suggestions:
146
162
147
- {
148
- "query": "Unit",
149
- "suggestions": ["United Arab Emirates", "United Kingdom", "United States"]
150
- }
163
+ ``` json
164
+ {
165
+ "query" : " Unit" ,
166
+ "suggestions" : [" United Arab Emirates" , " United Kingdom" , " United States" ]
167
+ }
168
+ ```
151
169
152
170
## Non standard query/results
153
171
154
172
If your ajax service expects the query in a different format, and returns data in a different format than the standard response,
155
173
you can supply the "paramName" and "transformResult" options:
156
174
157
- $('#autocomplete').autocomplete({
158
- paramName: 'searchString',
159
- transformResult: function(response) {
160
- return {
161
- suggestions: $.map(response.myData, function(dataItem) {
162
- return { value: dataItem.valueField, data: dataItem.dataField };
163
- })
164
- };
165
- }
166
- })
175
+ ``` javascript
176
+ $ (' #autocomplete' ).autocomplete ({
177
+ paramName: ' searchString' ,
178
+ transformResult : function (response ) {
179
+ return {
180
+ suggestions: $ .map (response .myData , function (dataItem ) {
181
+ return { value: dataItem .valueField , data: dataItem .dataField };
182
+ })
183
+ };
184
+ }
185
+ })
186
+ ```
167
187
168
188
## Grouping Results
169
189
170
190
Specify ` groupBy ` option of you data property if you wish results to be displayed in groups. For example, set ` groupBy: 'category' ` if your suggestion data format is:
171
191
172
- [
173
- { value: 'Chicago Blackhawks', data: { category: 'NHL' } },
174
- { value: 'Chicago Bulls', data: { category: 'NBA' } }
175
- ]
192
+ ``` javascript
193
+ [
194
+ { value: ' Chicago Blackhawks' , data: { category: ' NHL' } },
195
+ { value: ' Chicago Bulls' , data: { category: ' NBA' } }
196
+ ]
197
+ ```
176
198
177
199
Results will be formatted into two groups ** NHL** and ** NBA** .
178
200
179
201
##Known Issues
180
202
181
203
If you use it with jQuery UI library it also has plugin named ` autocomplete ` . In this case you can use plugin alias ` devbridgeAutocomplete ` :
182
204
183
- $('.autocomplete').devbridgeAutocomplete({ ... });
205
+ ``` javascript
206
+ $ (' .autocomplete' ).devbridgeAutocomplete ({ ... });
207
+ ```
184
208
185
209
##License
186
210
0 commit comments