Skip to content
This repository was archived by the owner on Dec 11, 2024. It is now read-only.

Commit ecf4114

Browse files
committed
enable syntax highlighting in readme file to make it a bit easier to
read
1 parent d257039 commit ecf4114

File tree

1 file changed

+87
-63
lines changed

1 file changed

+87
-63
lines changed

readme.md

Lines changed: 87 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -67,120 +67,144 @@ Autocomplete instance has following methods:
6767
There are two ways that you can invoke Autocomplete method. One is calling autocomplete on jQuery object and passing method name as string literal.
6868
If method has arguments, arguments are passed as consecutive parameters:
6969

70-
$('#autocomplete').autocomplete('disable');
71-
$('#autocomplete').autocomplete('setOptions', options);
70+
```javascript
71+
$('#autocomplete').autocomplete('disable');
72+
$('#autocomplete').autocomplete('setOptions', options);
73+
```
7274

7375
Or you can get Autocomplete instance by calling autcomplete on jQuery object without any parameters and then invoke desired method.
7476

75-
$('#autocomplete').autocomplete().disable();
76-
$('#autocomplete').autocomplete().setOptions(options);
77+
```javascript
78+
$('#autocomplete').autocomplete().disable();
79+
$('#autocomplete').autocomplete().setOptions(options);
80+
```
7781

7882
##Usage
7983

8084
Html:
8185

82-
<input type="text" name="country" id="autocomplete"/>
86+
```html
87+
<input type="text" name="country" id="autocomplete"/>
88+
```
8389

8490
Ajax lookup:
8591

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+
```
92100

93101
Local lookup (no ajax):
94102

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+
```
107117

108118
##Styling
109119

110120
Generated HTML markup for suggestions is displayed bellow. You may style it any way you'd like.
111121

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+
```
118130

119131
Style sample:
120132

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+
```
127141

128142

129143
##Response Format
130144

131145
Response from the server must be JSON formatted following JavaScript object:
132146

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+
```
142158

143159
Data can be any value or object. Data object is passed to formatResults function
144160
and onSelect callback. Alternatively, if there is no data you can
145161
supply just a string array for suggestions:
146162

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+
```
151169

152170
## Non standard query/results
153171

154172
If your ajax service expects the query in a different format, and returns data in a different format than the standard response,
155173
you can supply the "paramName" and "transformResult" options:
156174

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+
```
167187

168188
## Grouping Results
169189

170190
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:
171191

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+
```
176198

177199
Results will be formatted into two groups **NHL** and **NBA**.
178200

179201
##Known Issues
180202

181203
If you use it with jQuery UI library it also has plugin named `autocomplete`. In this case you can use plugin alias `devbridgeAutocomplete`:
182204

183-
$('.autocomplete').devbridgeAutocomplete({ ... });
205+
```javascript
206+
$('.autocomplete').devbridgeAutocomplete({ ... });
207+
```
184208

185209
##License
186210

0 commit comments

Comments
 (0)