带搜索过滤器的角度自动完成功能

Question

如何将Angular中的自动完成功能与搜索过滤器结合使用？

这是我使用搜索过滤器的代码我的问题是我想添加一个自动完成功能。

JS代码

angular.module('sortApp', [])

    .controller('mainController', function($scope) {
     $scope.sortType     = 'country'; // set the default sort type
     $scope.sortReverse  = false;  // set the default sort order
     $scope.searchCountry   = '';     // set the default search/filter term


  $scope.countries = [
    { country: 'Austria', smallmediumbusiness: '+43-720-880296', enterprise: '0800006482', countryClass:'at'},
    { country: 'Belgium', smallmediumbusiness: '+32-78480136', enterprise: '080049411', countryClass:'be'},
    { country: 'Bulgaria', smallmediumbusiness: '+359-24917167', enterprise: '00800-115-1013', countryClass:'bg'},
    { country: 'Croatia', smallmediumbusiness: '', enterprise: '0800-7534', countryClass:'hr'},
    { country: 'Czech Republic', smallmediumbusiness: '+420-228880035', enterprise: '800-408-884', countryClass:'cz'},
    { country: 'Denmark', smallmediumbusiness: '+45-89880568', enterprise: '80888039', countryClass:'dk'},
    { country: 'Estonia', smallmediumbusiness: '+372-8801898', enterprise: '800-0100-199', countryClass:'ee'},
    { country: 'Finland', smallmediumbusiness: '+358-942597807', enterprise: '0800114334', countryClass:'fi'},
    { country: 'France', smallmediumbusiness: '+33176686572', enterprise: '0805636251', countryClass:'fr'},
    { country: 'Germany', smallmediumbusiness: '+33176686572', enterprise: '08005893734', countryClass:'de'},
    { country: 'Hungary', smallmediumbusiness: '+36-18088424', enterprise: '0680015552', countryClass:'hu'},
    { country: 'Iceland', smallmediumbusiness: '', enterprise: '8009078', countryClass:'is'},
    { country: 'Ireland', smallmediumbusiness: '+33176686572', enterprise: '08005893734', countryClass:'ie'}
  ];

});

HTML

<input class="form-control" id="tags" type="search" ng-model="searchCountry" placeholder="Type your country to search" required="" style="margin-bottom:10px; margin-left: -16px;"/>


 <tr ng-repeat="view in countries | orderBy:sortType:sortReverse | filter:searchCountry">
                         <td class="{{view.countryClass}}">{{ view.country }}</td>
                         <td>{{ view.smallmediumbusiness }}</td>
                         <td>{{ view.enterprise }}</td>
                   </tr>

提前谢谢。

Answer 1

我建议你使用angular-ui#typeahead。

您只需要导入：

$course = Course::where('user_id',1)->where('course_category_id',5)->first();
  return response()->json($course,200);

在模块中

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script>

查看工作：

＆＃13;

＆＃13;

angular
  .module('sortApp', ['ngAnimate', 'ui.bootstrap'])

＆＃13;

(function() {
  angular
    .module('sortApp', ['ngAnimate', 'ui.bootstrap'])
    .controller('mainController', mainController);
    
    mainController.$inject = ['$scope'];
    
    function mainController($scope) {
      $scope.countries = [  
         {  
            "country":"Austria",
            "smallmediumbusiness":"+43-720-880296",
            "enterprise":"0800006482",
            "countryClass":"at"
         },
         {  
            "country":"Belgium",
            "smallmediumbusiness":"+32-78480136",
            "enterprise":"080049411",
            "countryClass":"be"
         },
         {  
            "country":"Bulgaria",
            "smallmediumbusiness":"+359-24917167",
            "enterprise":"00800-115-1013",
            "countryClass":"bg"
         },
         {  
            "country":"Croatia",
            "smallmediumbusiness":"",
            "enterprise":"0800-7534",
            "countryClass":"hr"
         },
         {  
            "country":"Czech Republic",
            "smallmediumbusiness":"+420-228880035",
            "enterprise":"800-408-884",
            "countryClass":"cz"
         },
         {  
            "country":"Denmark",
            "smallmediumbusiness":"+45-89880568",
            "enterprise":"80888039",
            "countryClass":"dk"
         },
         {  
            "country":"Estonia",
            "smallmediumbusiness":"+372-8801898",
            "enterprise":"800-0100-199",
            "countryClass":"ee"
         },
         {  
            "country":"Finland",
            "smallmediumbusiness":"+358-942597807",
            "enterprise":"0800114334",
            "countryClass":"fi"
         },
         {  
            "country":"France",
            "smallmediumbusiness":"+33176686572",
            "enterprise":"0805636251",
            "countryClass":"fr"
         },
         {  
            "country":"Germany",
            "smallmediumbusiness":"+33176686572",
            "enterprise":"08005893734",
            "countryClass":"de"
         },
         {  
            "country":"Hungary",
            "smallmediumbusiness":"+36-18088424",
            "enterprise":"0680015552",
            "countryClass":"hu"
         },
         {  
            "country":"Iceland",
            "smallmediumbusiness":"",
            "enterprise":"8009078",
            "countryClass":"is"
         },
         {  
            "country":"Ireland",
            "smallmediumbusiness":"+33176686572",
            "enterprise":"08005893734",
            "countryClass":"ie"
         }
      ];
    }
})();

＆＃13;

＆＃13;

＆＃13;