求助：AngularJS中uib-typeahead异步搜索框过滤失效及兼容问题

Hey there! Let's figure out what's tripping up your uib-typeahead in AngularJS. First, let's tackle that "success is not a function" warning and then fix the filtering issue.

Why you're seeing the "success is not a function" warning #

You're spot-on—the old typeahead directive is deprecated, and the .success() method you might be using with $http is also removed in newer AngularJS versions. Instead, you should use the standard promise chain with .then() to handle async responses. That's the root cause of that console warning.

Fixing the filtering issue with uib-typeahead #

Since you're already getting the correct array of objects, the filtering problem likely stems from one of these two common missteps:

1. You're manually filtering data before passing it to the directive
   uib-typeahead has built-in filtering logic that matches the user's input ($viewValue) against the fields you specify in the directive expression. If you're looping through the response and filtering it yourself in your async function, you're overriding the directive's natural behavior, leading to unexpected filtering results.

   Instead, just return the raw array of objects from your async call and let the directive handle the filtering. Here's a correct example:

   Controller code:

   $scope.searchAsync = function(userInput) {
     // Pass the user's input to your API as a query parameter
     return $http.get('/your-api-endpoint', { params: { query: userInput } })
       .then(function(response) {
         // Return the raw array of objects—no manual filtering here!
         return response.data;
       });
   };
   

   HTML template:

   <input type="text" 
          ng-model="selectedResult"
          uib-typeahead="item as item.displayName for item in searchAsync($viewValue)"
          placeholder="Search...">
   

   In the expression item as item.displayName for item in searchAsync($viewValue), item.displayName is the property the directive uses to match against the user's input. Swap displayName with your object's actual property (like name or title) to match your data structure.

2. You need a custom filter for multi-property matching
   If you want to filter against multiple properties (e.g., match both an item's name and description), add a custom filter function instead of relying on the default:

   Controller code for custom filter:

   $scope.multiFieldFilter = function(item, query) {
     const lowerQuery = query.toLowerCase();
     // Check against multiple properties in your object
     return item.name.toLowerCase().includes(lowerQuery) ||
            item.description.toLowerCase().includes(lowerQuery);
   };
   

   Updated HTML:

   <input type="text" 
          ng-model="selectedResult"
          uib-typeahead="item as item.name for item in searchAsync($viewValue) | filter:multiFieldFilter"
          placeholder="Search...">
   

Quick recap of fixes #

• Ditch the old typeahead directive entirely—use uib-typeahead exclusively.
• Replace .success() with .then() in your $http calls to eliminate the console warning.
• Stop manually filtering the async response array; let uib-typeahead handle that work.
• Double-check that your directive expression references the correct property from your objects (the part after as is what gets displayed and matched).

内容的提问来源于stack exchange，提问作者geeberry