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:
parent
52151c267b
commit
a362ce1b06
23
readme.md
23
readme.md
@ -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.
|
||||||
|
@ -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, {
|
||||||
|
@ -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();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user