2
0
mirror of https://github.com/devbridge/jQuery-Autocomplete.git synced 2024-11-25 22:27:39 +00:00

Call transformResult on the value returned from the server. Fixes #49

This commit is contained in:
Tomas Kirda 2013-02-21 16:25:07 -06:00
parent 52151c267b
commit a362ce1b06
3 changed files with 66 additions and 23 deletions

View File

@ -15,7 +15,7 @@ The standard jquery.autocomplete.js file is around 2.7KB when minified via Closu
* `serviceUrl`: Server side URL that provides results for suggestions. Optional if local lookup data is provided. * `serviceUrl`: Server side URL that provides results for suggestions. Optional if local lookup data is provided.
* `lookup`: Lookup array for the suggestions. It may be array of strings or `suggestion` object literals. * `lookup`: Lookup array for the suggestions. It may be array of strings or `suggestion` object literals.
* `suggestion`: An object literal with the following format: `{ value: 'string', data: any }`. * `suggestion`: An object literal with the following format: `{ value: 'string', data: any }`.
* `lookupFilter`: `function (suggestion, query, queryLowerCase) {}` filter function for local lookups. By default it does partial string match (case insensitive). * `lookupFilter`: `function (suggestion, query, queryLowerCase) {}` filter function for local lookups. By default it does partial string match (case insensitive).
* `onSelect`: `function (suggestion) {}` Callback function invoked when user selects suggestion * `onSelect`: `function (suggestion) {}` Callback function invoked when user selects suggestion
from the list. `this` inside callback refers to input HtmlElement. from the list. `this` inside callback refers to input HtmlElement.
* `minChars`: Minimum number of characters required to trigger autosuggest. Default: `1`. * `minChars`: Minimum number of characters required to trigger autosuggest. Default: `1`.
@ -34,10 +34,10 @@ The standard jquery.autocomplete.js file is around 2.7KB when minified via Closu
* `onSearchComplete`: `function (query) {}` called after ajax response is processed. `this` is bound to input element. * `onSearchComplete`: `function (query) {}` called after ajax response is processed. `this` is bound to input element.
* `tabDisabled`: Default `false`. Set to true to leave the cursor in the input field after the user tabs to select a suggestion. * `tabDisabled`: Default `false`. Set to true to leave the cursor in the input field after the user tabs to select a suggestion.
* `paramName`: Default `query`. The name of the request parameter that contains the query. * `paramName`: Default `query`. The name of the request parameter that contains the query.
* `transformResult`: `function(response) {}` 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.
* `autoSelectFirst`: if set to `true`, first item will be selected when showing suggestions. Default value `false`. * `autoSelectFirst`: if set to `true`, first item will be selected when showing suggestions. Default value `false`.
* `appendTo`: container where suggestions will be appended. Default value `body`. Can be jQuery object, selector or html element. Make sure to set `position: absolute` or `position: relative` for that element. * `appendTo`: container where suggestions will be appended. Default value `body`. Can be jQuery object, selector or html element. Make sure to set `position: absolute` or `position: relative` for that element.
* `dataType`: type of data returned from server. Either 'text' (default) or 'jsonp', which will cause the autocomplete to use jsonp. You may return a json object in your callback when using jsonp. * `dataType`: type of data returned from server. Either 'text' (default) or 'jsonp', which will cause the autocomplete to use jsonp. You may return a json object in your callback when using jsonp.
##Usage ##Usage
@ -115,13 +115,16 @@ you can supply the "paramName" and "transformResult" options:
$('#autocomplete').autocomplete({ $('#autocomplete').autocomplete({
paramName: 'searchString', paramName: 'searchString',
transformResult: function(response) { transformResult: function(response, originalQuery) {
return $.map(response.myData, function(dataItem) { return {
return {value: dataItem.valueField, data: dataItem.dataField}; query: originalQuery,
}); suggestions: $.map(response.myData, function(dataItem) {
return { value: dataItem.valueField, data: dataItem.dataField };
})
};
} }
}) })
Important: query value must match original value in the input Important: query value must match original value in the input
field, otherwise suggestions will not be displayed. field, otherwise suggestions will not be displayed.

View File

@ -171,6 +171,45 @@ describe('Autocomplete', function () {
}); });
}); });
it('Should transform results', function () {
var input = document.createElement('input'),
ajaxExecuted = false,
url = '/test-transform',
autocomplete = new $.Autocomplete(input, {
serviceUrl: url,
transformResult: function (result, query) {
return {
query: query,
suggestions: $.map(result.split(','), function (item) {
return { value: item, data: null };
})
};
}
});
$.mockjax({
url: url,
responseTime: 50,
response: function () {
ajaxExecuted = true;
this.responseText = 'Andora,Angola,Argentina';
}
});
input.value = 'A';
autocomplete.onValueChange();
waitsFor(function () {
return ajaxExecuted;
}, 'Ajax call never completed.', 100);
runs(function () {
expect(ajaxExecuted).toBe(true);
expect(autocomplete.suggestions.length).toBe(3);
expect(autocomplete.suggestions[0].value).toBe('Andora');
});
});
it('Should should not preventDefault when tabDisabled is set to false', function () { it('Should should not preventDefault when tabDisabled is set to false', function () {
var input = document.createElement('input'), var input = document.createElement('input'),
autocomplete = new $.Autocomplete(input, { autocomplete = new $.Autocomplete(input, {

View File

@ -94,8 +94,8 @@
return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1; return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1;
}, },
paramName: 'query', paramName: 'query',
transformResult: function (response) { transformResult: function (response, originalQuery) {
return response.suggestions; return typeof response === 'string' ? $.parseJSON(response) : response;
} }
}; };
@ -408,8 +408,8 @@
data: options.params, data: options.params,
type: options.type, type: options.type,
dataType: options.dataType dataType: options.dataType
}).done(function (txt) { }).done(function (data) {
that.processResponse(txt); that.processResponse(data, q);
options.onSearchComplete.call(that.element, q); options.onSearchComplete.call(that.element, q);
}); });
} }
@ -475,23 +475,24 @@
return suggestions; return suggestions;
}, },
processResponse: function (text) { processResponse: function (response, originalQuery) {
var that = this, var that = this,
response = typeof text == 'string' ? $.parseJSON(text) : text; options = that.options,
result = that.options.transformResult(response, originalQuery);
response.suggestions = that.verifySuggestionsFormat(that.options.transformResult(response)); result.suggestions = that.verifySuggestionsFormat(result.suggestions);
// Cache results if cache is not disabled: // Cache results if cache is not disabled:
if (!that.options.noCache) { if (!options.noCache) {
that.cachedResponse[response[that.options.paramName]] = response; that.cachedResponse[result[options.paramName]] = result;
if (response.suggestions.length === 0) { if (result.suggestions.length === 0) {
that.badQueries.push(response[that.options.paramName]); that.badQueries.push(result[options.paramName]);
} }
} }
// Display suggestions only if returned query matches current value: // Display suggestions only if returned query matches current value:
if (response[that.options.paramName] === that.getQuery(that.currentValue)) { if (result[options.paramName] === that.getQuery(that.currentValue)) {
that.suggestions = response.suggestions; that.suggestions = result.suggestions;
that.suggest(); that.suggest();
} }
}, },