123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- ///<reference path="../jquery/jquery.d.ts" />
- ///<reference path="../jquery-autocomplete/jquery.autocomplete.d.ts" />
- // ----------------------------------------------------------------------------------------
- // --------------------------------- WEBSITE EXAMPLE --------------------------------------
- // ---------- https://www.devbridge.com/sourcery/components/jquery-autocomplete/ ----------
- // ----------------------------------------------------------------------------------------
- var input = $('#autocomplete');
- var options = {};
- input.autocomplete('disable');
- input.autocomplete('setOptions', options);
- input.autocomplete().disable();
- input.autocomplete().setOptions(options);
- // Ajax lookup:
- input.autocomplete({
- serviceUrl: '/autocomplete/countries',
- onSelect: function (suggestion) {
- alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
- }
- });
- // Local lookup (no ajax):
- var countries = [
- { value: 'Andorra', data: 'AD' },
- // ...
- { value: 'Zimbabwe', data: 'ZZ' }
- ];
- input.autocomplete({
- lookup: countries,
- onSelect: function (suggestion) {
- alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
- }
- });
- // Non standard query/results
- input.autocomplete({
- paramName: 'searchString',
- transformResult: function(response: any, originalQuery: string): AutocompleteResponse {
- return {
- suggestions: $.map(response.myData, function (dataItem) {
- return {value: dataItem.valueField, data: dataItem.dataField};
- })
- };
- }
- });
- // ----------------------------------------------------------------------------------------
- // ------------------------------ TEST INSTANCE METHODS -----------------------------------
- // ----------------------------------------------------------------------------------------
- input.autocomplete().setOptions(options);
- input.autocomplete().clear();
- input.autocomplete().clearCache();
- input.autocomplete().disable();
- input.autocomplete().enable();
- input.autocomplete().hide();
- input.autocomplete().dispose();
- // ----------------------------------------------------------------------------------------
- // ------------------------------ TEST DEFAULT OPTIONS ------------------------------------
- // ----------------------------------------------------------------------------------------
- input.autocomplete({
- //----------------o AJAX SETTINGS
- serviceUrl: '/autocomplete/countries',
- type: 'GET',
- dataType: 'text',
- paramName: 'query',
- params: {},
- deferRequestBy: 0,
- ajaxSettings: {},
- //----------------o CONFIG SETTINGS
- noCache: false,
- delimiter: "-",
- onSearchStart(query: string) {
- console.log("query: ", query);
- },
- onSearchComplete(query: string, suggestions: AutocompleteSuggestion[]) {
- console.log("query: ", query);
- console.log("suggestions: ", suggestions);
- },
- onSearchError(query: string, jqXHR: JQueryXHR, textStatus: string, errorThrown: any) {
- console.log("query: ", query);
- console.log("jqXHR: ", jqXHR);
- console.log("textStatus: ", textStatus);
- console.log("errorThrown: ", errorThrown);
- },
- transformResult(response: any, originalQuery: string): AutocompleteResponse {
- return {
- suggestions: [
- { value: 'Andorra', data: 'AD' },
- // ...
- { value: 'Zimbabwe', data: 'ZZ' }
- ]
- }
- },
- onSelect(suggestion: AutocompleteSuggestion) {
- console.log("suggestions: ", suggestion);
- },
- minChars: 1,
- lookupLimit: 1,
- lookup: [
- { value: 'Andorra', data: 'AD' },
- // ...
- { value: 'Zimbabwe', data: 'ZZ' }
- ],
- lookupFilter(suggestion: AutocompleteSuggestion, query: string, queryLowercase: string): any {
- return query !== "query"
- },
- triggerSelectOnValidInput: true,
- preventBadQueries: true,
- autoSelectFirst: false,
- onHide(container: any) {
- console.log("container: ", container);
- },
- //----------------o PRESENTATION SETTINGS
- beforeRender(container: any) {
- console.log("container: ", container);
- },
- formatResult(suggestion: AutocompleteSuggestion, currentValue: string): string {
- return currentValue;
- },
- groupBy: "category",
- maxHeight: 300,
- width: "auto",
- zIndex: 9999,
- appendTo: document.body,
- forceFixPosition: false,
- orientation: "bottom",
- preserveInput: false,
- showNoSuggestionNotice: false,
- noSuggestionNotice: "No results",
- onInvalidateSelection() {
- console.log("onInvalidateSelection");
- },
- tabDisabled: false
- });
|