2
0
mirror of https://github.com/devbridge/jQuery-Autocomplete.git synced 2024-11-08 22:31:03 +00:00

Adds transformRequest method to allow formatting the sent request,

defaulting to the previous implementation.
Updates docs.
This commit is contained in:
Jendoliver 2019-09-23 13:21:53 +02:00
parent 0ba256501b
commit 8d19938316
2 changed files with 21 additions and 2 deletions

View File

@ -48,6 +48,7 @@ $(selector).autocomplete(options);
| `onSearchStart` | `function (params) {}` called before Ajax request. `this` is bound to input element | | `onSearchStart` | `function (params) {}` called before Ajax request. `this` is bound to input element |
| `onHint` | `function (hint) {}` used to change input value to first suggestion automatically | | `onHint` | `function (hint) {}` used to change input value to first suggestion automatically |
| `onSearchComplete` | `function (query, suggestions) {}` called after Ajax response is processed. `this` is bound to input element. `suggestions` is an array containing the results | | `onSearchComplete` | `function (query, suggestions) {}` called after Ajax response is processed. `this` is bound to input element. `suggestions` is an array containing the results |
| `transformRequest` | `function (query, options) {}` called before Ajax request. Use it if your `serviceUrl` expects the request in a strange format where the search term cannot be resolved as a property of the request |
| `transformResult` | `function(response, originalQuery) {}` called after the result of the query is ready. Converts the result into response.suggestions format | | `transformResult` | `function(response, originalQuery) {}` called after the result of the query is ready. Converts the result into response.suggestions format |
| `onSelect` | `function (suggestion) {}` Callback function invoked when user selects suggestion from the list. `this` inside callback refers to input HtmlElement.| | `onSelect` | `function (suggestion) {}` Callback function invoked when user selects suggestion from the list. `this` inside callback refers to input HtmlElement.|
| `onSearchError` | `function (query, jqXHR, textStatus, errorThrown) {}` called if Ajax request fails. `this` is bound to input element | | `onSearchError` | `function (query, jqXHR, textStatus, errorThrown) {}` called if Ajax request fails. `this` is bound to input element |
@ -218,7 +219,7 @@ supply just a string array for suggestions:
## Non standard query/results ## Non standard query/results
If your Ajax service expects the query in a different format, and returns data in a different format than the standard response, If your Ajax service expects the query in a different format, and returns data in a different format than the standard response,
you can supply the "paramName" and "transformResult" options: you can supply the `paramName` and `transformResult` options:
```javascript ```javascript
$('#autocomplete').autocomplete({ $('#autocomplete').autocomplete({
@ -233,6 +234,17 @@ $('#autocomplete').autocomplete({
}) })
``` ```
If only changing the `paramName` isn't enough for the request to comply with the endpoint specifications,
you can also use the `transformRequest` option to completely change the request structure:
```javascript
$('#autocomplete').autocomplete({
transformRequest: function(query, options) {
return JSON.stringify({ autocomplete: {term: query} })
}
})
```
## Grouping Results ## Grouping Results
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: 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:

View File

@ -118,6 +118,7 @@
preventBadQueries: true, preventBadQueries: true,
lookupFilter: _lookupFilter, lookupFilter: _lookupFilter,
paramName: 'query', paramName: 'query',
transformRequest: _transformRequest,
transformResult: _transformResult, transformResult: _transformResult,
showNoSuggestionNotice: false, showNoSuggestionNotice: false,
noSuggestionNotice: 'No results', noSuggestionNotice: 'No results',
@ -129,6 +130,12 @@
return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1; return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1;
}; };
function _transformRequest(query, options) {
var params = {};
params[options.paramName] = query;
return params;
};
function _transformResult(response) { function _transformResult(response) {
return typeof response === 'string' ? $.parseJSON(response) : response; return typeof response === 'string' ? $.parseJSON(response) : response;
}; };
@ -546,7 +553,7 @@
cacheKey, cacheKey,
ajaxSettings; ajaxSettings;
options.params[options.paramName] = q; options.params = options.transformRequest(q, options);
if (options.onSearchStart.call(that.element, options.params) === false) { if (options.onSearchStart.call(that.element, options.params) === false) {
return; return;