typeahead控件的上/下箭头键问题(angular customize-typeahead-widget)+没有bootstrap

时间:2016-05-17 11:53:40

标签: angularjs

我们创建了pluncker:http://plnkr.co/edit/dgjHsKQLVPpacfGpQCUQ?p=preview,我们已经实现了typeahead控件。

问题在步骤中解释: -

  1. 键入“a”之类的内容以获取typeahead中的数据(列表将是 填充)
  2. 按向下箭头键(焦点应在列表项上)
  3. 按向下箭头键,它应该向下和向下按,然后按向上键 应该列出。
  4. 但我们无法使用上下键遍历列表。

    angular.module('autosearch', []);
    angular.module('autosearch').controller('TypeaheadCtrl', function($scope, $http) {
      $scope.search= {}
     console.log('hiiii');
    }).directive('searchItems', ['$document', function($document) {
        return {
          restrict: 'E',
          scope: {
            search: '=ngModel'
          },
          templateUrl: 'auto-search.html',
          link: function(scope, elem, attr) {
            console.log('fghfgh');
            scope.product = {};
            scope.quantity = 10;
            scope.categoryQuantity = 7;
            scope.setCurrent = function(product) {
              return scope.categories = product.category;
            };
            scope.search.searchItems = function() {
              scope.showList = true;
              scope.items = [
                {
                  "id": "99",
                  "name": "Apricot Kernels",
                  "category": []
                }, {
                  "id": "136",
                  "name": "Apparel",
                  "category": [
                    {
                      "name": "Coats",
                      "id": 156
                    }, {
                      "name": "Dresses",
                      "id": 157
                    }, {
                      "name": "Ethnic Clothing",
                      "id": 165
                    }, {
                    {
                      "name": "Mannequins",
                      "id": 224
                    }, {
                      "name": "Maternity Clothing",
                      "id": 225
                    }, {
                      "name": "Men's Shirts",
                      "id": 226
                    }, {
                      "name": "Other Apparel",
                      "id": 227
                    }, {
                      "name": "Pants \u0026 Trousers",
                      "id": 228
                    },{
                      "name": "Wedding Apparel \u0026 Accessories",
                      "id": 296
                    }, {
                      "name": "Work Wear",
                      "id": 302
                    }
                  ]
                }, {
                  "id": "139",
                  "name": "Apparel Stock",
                  "category": []
                }, {
                  "id": "1999",
                  "name": "Apparel Accessories Machinery",
                  "category": [
                    {
                      "name": "Cap Making Machinery",
                      "id": 2000
                    }, {
                      "name": "Gloves Making Machinery",
                      "id": 2001
                    }, {
                    , {
                      "name": "Sock Knitting Machinery",
                      "id": 2005
                    }
                  ]
                }, {
                  "id": "138",
                  "name": "Apparel Processing Services",
                  "category": []
                }, {
                  "id": "1990",
                  "name": "Apparel \u0026 Textile Machinery Parts",
                  "category": [
                    {
                      "name": "Apparel Machinery Parts",
                      "id": 1991
                    }, {
                    {
                      "name": "Sock Knitting Machinery Parts",
                      "id": 1997
                    }, {
                      "name": "Textile Machinery Parts",
                      "id": 1998
                    }
                  ]
                }, {
                  "id": "1990",
                  "name": "Parts",
                  "category": [
                    {
                      "name": "Apparel Machinery Parts",
                      "id": 1991
                    }, {
                      "name": "Cap Making Machinery Parts",
                      "id": 1992
                    }, {
                      "name": "Glove Making Machinery Parts",
                      "id": 1993
                    }, {
                      "name": "Sock Knitting Machinery Parts",
                      "id": 1997
                    }, {
                      "name": "Textile Machinery Parts",
                      "id": 1998
                    }
                  ]
                }, {
                  "id": "1990",
                  "name": "Machinery Parts",
                  "category": [
                    {
                      "name": "Apparel Machinery Parts",
                      "id": 1991
                    }, {
                      "name": "Cap Making Machinery Parts",
                      "id": 1992
                    }, {
                      "name": "Glove Making Machinery Parts",
                      "id": 1993
                    , {
                      "name": "Sock Knitting Machinery Parts",
                      "id": 1997
                    }, {
                      "name": "Textile Machinery Parts",
                      "id": 1998
                    }
                  ]
                }, {
                  "id": "1990",
                  "name": "Textile Machinery Parts",
                  "category": [
                    {
                      "name": "Machinery Parts",
                      "id": 1991
                    }, {
                      "name": "Cap Making Machinery Parts",
                      "id": 1992
                    }, {
                      "name": "Glove Making Machinery Parts",
                      "id": 1993
                    }, {
                      "name": "Home Textile Product Machinery Parts",
                      "id": 1994
                    }, {
                      "name": "Leather Production Machinery Parts",
                      "id": 1995
                    }, {
                      "name": "Shoemaking Machinery Parts",
                      "id": 1996
                    }, {
                      "name": "Sock Knitting Machinery Parts",
                      "id": 1997
                    }, {
                      "name": "Textile Machinery Parts",
                      "id": 1998
                    }
                  ]
                }, {
                  "id": "136",
                  "name": "Apparel",
                  "category": [
                    {
                      "name": "Apparel Design Services",
                      "id": 137
                    }, {
                      "name": "Apparel Processing Services",
                      "id": 138
                    , {
                      "name": "Garment Accessories",
                      "id": 171
                    }, {
                      "name": "Hoodies \u0026 Sweatshirts",
                      "id": 198
                    }, {
                      "name": "Hosiery",
                      "id": 199
                    }, {
                      "name": "Infant \u0026 Toddlers Clothing",
                      "id": 205
                    }, {
                      "name": "Jackets",
                      "id": 221
                    }, {
                      "name": "Jeans",
                      "id": 222
                    }, {
                      "name": "Ladies Blouses \u0026 Tops",
                      "id": 223
                    }, {
                      "name": "Mannequins",
                      "id": 224
                    }, {
                      "name": "Maternity Clothing",
                      "id": 225
                    }, {
                      "name": "Men's Shirts",
                      "id": 226
                    }, {
                      "name": "Other Apparel",
                      "id": 227
                    }, {
                      "name": "Pants \u0026 Trousers",
                      "id": 228
                    }, {
                      "name": "Sewing Supplies",
                      "id": 229
                    }, {
                      "name": "Shorts",
                      "id": 234
                    }, {
                      "name": "Skirts",
                      "id": 235
                    }, {
                      "name": "Sleepwear",
                      "id": 236
                    }, {
                      "name": "Sportswear",
                    {
                      "name": "Used Clothes",
                      "id": 294
                    }, {
                      "name": "Vests \u0026 Waistcoats",
                      "id": 295
                    }, {
                      "name": "Wedding Apparel \u0026 Accessories",
                      "id": 296
                    }, {
                      "name": "Work Wear",
                      "id": 302
                    }
                  ]
                }
              ];
              console.log(scope.items, 'itwe,sss');
            };
          }
        }
      }]);
    

0 个答案:

没有答案