Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Typeahead : Filters do not work with Promise as source #1740

Closed
dcolaizzomarathon opened this issue Feb 5, 2014 · 5 comments
Closed

Typeahead : Filters do not work with Promise as source #1740

dcolaizzomarathon opened this issue Feb 5, 2014 · 5 comments

Comments

@dcolaizzomarathon
Copy link

Filters work in expressions passed to typeahead for static arrays. They are ignored when the array source is an asynchronous request.

See 'Asynchronous Results' example provided by documentation. http://plnkr.co/edit/w8uxP0?p=preview. Both filter: and limitTo: are ignored in the results dropdown.

@pkozlowski-opensource
Copy link
Member

@dcolaizzomarathon our docs / demo were a bit misleading, and I've just corrected it via c5862b0. Regarding your query: AngularJS filters are executing synchronously and if you write your expression like address for address in getLocation($viewValue) | filter:$viewValue this part getLocation($viewValue) means that a filter would filter a promise object (which is noop as filter filter can only operate on arrays). The correct approach here is to do filtering on the server-side (this is the whole point of having async results from the server). If you still want to do further filtering on the client side you can do so in the promise callback function, in JavaScript.

http://plnkr.co/edit/izqWaLWM6YkrZXyArrHm?p=preview

@ghost
Copy link

ghost commented Mar 11, 2014

Got stuck on that as well.
I for example wanted to load the list without filtering server side so i could use cache.
Maybe add a little note in the example to explicitly show it doesn't work.

benjaminch pushed a commit to benjaminch/bootstrap that referenced this issue Apr 15, 2014
Also, change the way disabled dropdownToggle is read from `attrs` instead of element property.

Closes angular-ui#1867
Closes angular-ui#1870

Add an optionnal parameter on timepicker object in order to control the visibility of the controls arrows.

chore(tests): Add unit tests for arrows control visibility

Fixing demo semi colon issue.

chore(release): Add unit tests

chore(timepicker): Add LOC to check the user's input

chore(timepicker): Remove  method for showArrowControls option

chore(timepicker): Remove Show / Hide option from demo

chore(timepicker): Hides <tr> element rather than <td> element.

chore(tests): Simplify arrows control visibility tests

chore(tests): Refactoring arrow visibility tests

refactor(rating): use `track by` in template

Closes angular-ui#1724

refactor(pagination): add `href` and `track by` in templates

Closes angular-ui#1725

fix(progressbar): allow fractional values for bar width

 * Fractions are limited to two decimals, and are not included in aria values.

Closes angular-ui#1761

fix(dropdown): use $animate for adding and removing classes

Closes angular-ui#1644

feat(datepicker): add `datepicker-mode`, `init-date` & today hint

 * Add two-way binded `datepicker-mode`.
 * Add optional `init-date` when no model value is specified.
 * Add hint for current date.
 * Use isolated scope for popup directive.
 * Use optional binding for `isOpen`.
 * Split each mode into it's own directive.

Closes angular-ui#1599

BREAKING CHANGE:
`show-weeks` is no longer a watched attribute
`*-format` attributes have been renamed to `format-*`
`min` attribute has been renamed to `min-date`
`max` attribute has been renamed to `max-date`

refactor(rating): evaluate attributes inside init function

Closes angular-ui#1590
Closes angular-ui#1768

refactor(pagination): remove unused watch

Closes angular-ui#1769

fix(typeahead): correctly higlight numeric matches

Fixes angular-ui#1777

refactor(typeahead): use `ng-if` and `track by` in template

Closes angular-ui#1722

demo(typeahead): correct demo for asyn results

Fixes angular-ui#1740

refactor(datepicker): track buttons by date instead of $index

refactor(pagination): move boundary & directions to the template

Closes angular-ui#795
Closes angular-ui#1770

feat(alert): add WAI-ARIA markup

Closes angular-ui#1806

chore(demo): fix fork button width

Closes angular-ui#1805

fix(datepicker): `Today` button should not set time

Fixes angular-ui#1726
Closes angular-ui#1808

fix(progressbar): number filter in bar template and only for percent

Closes angular-ui#1807

refactor(dropdown): remove isolated scope

Closes angular-ui#1818

feat(typeahead): add WAI-ARIA markup

Closes angular-ui#1814

refactor(accordion): transclude function in compile is deprecated.

Closes angular-ui#1789

refactor(carousel): use `track by` in template

Closes angular-ui#1723

fix(datepicker): mark input field as invalid if the date is invalid

Closes angular-ui#1845

Conflicts:
	src/datepicker/datepicker.js
	src/datepicker/test/datepicker.spec.js
benjaminch pushed a commit to benjaminch/bootstrap that referenced this issue May 10, 2014
Also, change the way disabled dropdownToggle is read from `attrs` instead of element property.

Closes angular-ui#1867
Closes angular-ui#1870

Add an optionnal parameter on timepicker object in order to control the visibility of the controls arrows.

chore(tests): Add unit tests for arrows control visibility

Fixing demo semi colon issue.

chore(release): Add unit tests

chore(timepicker): Add LOC to check the user's input

chore(timepicker): Remove  method for showArrowControls option

chore(timepicker): Remove Show / Hide option from demo

chore(timepicker): Hides <tr> element rather than <td> element.

chore(tests): Simplify arrows control visibility tests

chore(tests): Refactoring arrow visibility tests

fix(dropdown): unbind toggle element event on scope destroy

Also, change the way disabled dropdownToggle is read from `attrs` instead of element property.

Closes angular-ui#1867
Closes angular-ui#1870

Add an optionnal parameter on timepicker object in order to control the visibility of the controls arrows.

chore(tests): Add unit tests for arrows control visibility

Fixing demo semi colon issue.

chore(release): Add unit tests

chore(timepicker): Add LOC to check the user's input

chore(timepicker): Remove  method for showArrowControls option

chore(timepicker): Remove Show / Hide option from demo

chore(timepicker): Hides <tr> element rather than <td> element.

chore(tests): Simplify arrows control visibility tests

chore(tests): Refactoring arrow visibility tests

refactor(rating): use `track by` in template

Closes angular-ui#1724

refactor(pagination): add `href` and `track by` in templates

Closes angular-ui#1725

fix(progressbar): allow fractional values for bar width

 * Fractions are limited to two decimals, and are not included in aria values.

Closes angular-ui#1761

fix(dropdown): use $animate for adding and removing classes

Closes angular-ui#1644

feat(datepicker): add `datepicker-mode`, `init-date` & today hint

 * Add two-way binded `datepicker-mode`.
 * Add optional `init-date` when no model value is specified.
 * Add hint for current date.
 * Use isolated scope for popup directive.
 * Use optional binding for `isOpen`.
 * Split each mode into it's own directive.

Closes angular-ui#1599

BREAKING CHANGE:
`show-weeks` is no longer a watched attribute
`*-format` attributes have been renamed to `format-*`
`min` attribute has been renamed to `min-date`
`max` attribute has been renamed to `max-date`

refactor(rating): evaluate attributes inside init function

Closes angular-ui#1590
Closes angular-ui#1768

refactor(pagination): remove unused watch

Closes angular-ui#1769

fix(typeahead): correctly higlight numeric matches

Fixes angular-ui#1777

refactor(typeahead): use `ng-if` and `track by` in template

Closes angular-ui#1722

demo(typeahead): correct demo for asyn results

Fixes angular-ui#1740

refactor(datepicker): track buttons by date instead of $index

refactor(pagination): move boundary & directions to the template

Closes angular-ui#795
Closes angular-ui#1770

feat(alert): add WAI-ARIA markup

Closes angular-ui#1806

chore(demo): fix fork button width

Closes angular-ui#1805

fix(datepicker): `Today` button should not set time

Fixes angular-ui#1726
Closes angular-ui#1808

fix(progressbar): number filter in bar template and only for percent

Closes angular-ui#1807

refactor(dropdown): remove isolated scope

Closes angular-ui#1818

feat(typeahead): add WAI-ARIA markup

Closes angular-ui#1814

refactor(accordion): transclude function in compile is deprecated.

Closes angular-ui#1789

refactor(carousel): use `track by` in template

Closes angular-ui#1723

fix(datepicker): mark input field as invalid if the date is invalid

Closes angular-ui#1845

Conflicts:
	src/datepicker/datepicker.js
	src/datepicker/test/datepicker.spec.js
@adonespitogo
Copy link

@ghost - You can use $filter service in the controller:

function ($scope, $filter, myService, $q) {
  $scope.search = function (query) {
    var deferred = $q.defer(); // https://docs.angularjs.org/api/ng/service/$q
    var searchPromise = myService.querySomething(query);
    searchPromise.then(function (results) {
      var filteredResults = $filter('filterName')(results, arg1, arg2, argNth); // https://docs.angularjs.org/api/ng/service/$filter
      deferred.resolve(filteredResults);
    });
    return deferred.promise;
  };
}

Return another promise with the filtered results instead of returning the search promise directly.

@sigMacity
Copy link

Given the number of requests (for info, how to's, please help's, etc) there are regarding forced selection of async sources i.e. invalidating when initial value not available from source, invalidating if value isn't selected from source list and so on, it may be worth re-opening this item. IMHO it makes sense to do this from within the typeahead code, rather than frigging around in the calling code.

@worthy7
Copy link

worthy7 commented Oct 24, 2017

If you are querying your database, you surely want it to stop after X number of results. So the most efficient way to do this is to set/send the limit serverside. And for anyone searching locally instead, then using the filter function seems fine.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants