标签: md-autocomplete

我正在使用md-autocompleteAngular Material：这里

下拉菜单的宽度似乎与输入字段的宽度一致。如果项目的文本太长，则有ellipsis.

但是，我想显示项目的全文，同时保持输入字段的宽度相对较短。也就是说，下拉菜单的宽度应该随着其内容而扩展。

我尝试检查md-autocomplete's 元素的样式，但找不到任何可以解决问题的样式。任何的想法？

编辑：

这是我最终拥有的风格：

.md-autocomplete-suggestions-container{
    overflow-y:scroll
}

.md-autocomplete-suggestions-container .md-virtual-repeat-scroller{
    position:static
}

.md-autocomplete-suggestions-container .md-virtual-repeat-sizer{
    height:0 !important
}

.md-autocomplete-suggestions-container .md-virtual-repeat-offsetter{
    position:static
}

然而，还有一个问题。将overflow-y:scroll始终显示vertial滚动条，即使在不需要的时候。如果我将其更改为overflow-y:auto，则出现时的垂直滚动条将创建ellipsis. 我该如何解决这个问题？

目前，每次我在 中输入内容时， md-search-text-change 事件都会触发一个调用。我想推迟这件事。我尝试过使用去抖动。但这并没有奏效。

我正在使用Angular md-autocomplete，当他们第一次在文本框中键入内容后，它会开始在下拉菜单中向用户显示自动完成选项。无论如何，当用户第一次单击文本框中时，是否还会显示此下​​拉菜单？

这是md-autocomplete html：

<md-autocomplete flex
                 role="combobox"
                 md-selected-item="text"
                 md-no-cache="true"
                 md-search-text="searchText"
                 md-search-text-change="searchTextChange(searchText)"
                 md-items="item in getMatches(searchText)"
                 md-item-text="item.autocompleteVal"
                 md-min-length="0"
                 md-selected-item-change="$parent.selectedItemChange(item)" on-enter ng-cloak>
                            <span id="autocompleteText" md-highlight-text="searchText" md-highlight-flags="^i">{{item.autocompleteVal}} </span>
</md-autocomplete>

我正在使用angular 4的芯片组和自动完成功能来开发stackoverflow中的标记系统等功能。这是我写的代码。没用

<mat-form-field class="col-md-4 col-md-offset-2">
                  <mat-chip-list #chipList>
                    <mat-chip *ngFor="let item of displayItems" [selectable]="selectable"
                             [removable]="removable" (remove)="remove(item)">
                      {{item}}
                      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                    </mat-chip>
                    <input placeholder="Enter Items..."  
                           [matChipInputFor]="chipList"
                           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                           [matChipInputAddOnBlur]="addOnBlur"
                           (matChipInputTokenEnd)="add($event)" matInput  [matAutocomplete]="auto"/>

                           <mat-autocomplete #auto="matAutocomplete">
                                <mat-option *ngFor="let option of options" [value]="option">
                                    {{ option }}
                                </mat-option>
                            </mat-autocomplete>

                  </mat-chip-list>
                  <mat-hint align="end">Press comma or enter after each selection</mat-hint>
                </mat-form-field>

以下是TS文件：选项基本上是从中选择自动完成的。

snacksType: String[];

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  options=['banana','apple','jackfruit','mango', 'grapes', 'kiwi'];
  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];

  displayItems = []; …

我正在尝试使用md-autocomplete与Algolia的Angular服务一起玩.我坚持让下拉列表显示从Algolia返回的结果.内容在控制台中,但下拉列表不会填充更新的结果.我错过了什么？

tl;博士:Plnkr

"后端"

.controller('DemoCtrl', DemoCtrl);
function DemoCtrl ($timeout, $q, $log, algolia, $http, $scope) {

   var self = this;
   self.simulateQuery = false;
   self.isDisabled    = false;
   self.repos         = loadAll();
   self.querySearch   = querySearch;
   self.selectedItemChange = selectedItemChange;
   self.searchTextChange   = searchTextChange;

   // Algolia demo keys below
   var client = algolia.Client('latency', '6be0576ff61c053d5f9a3225e2a90f76');
   var index = client.initIndex('contacts');
   $scope.query = '';
   $scope.hits = [];

   // Disable cache
   $scope.noCacheResults = false;


   // ******************************
   // Internal methods
   // ******************************
   /**
    * Search for repos... use …

我正在使用 md-autocomplete 元素，但是当搜索字段为空时没有下拉列表。它甚至不调用 querySearch 函数。当我输入任何内容时，该功能被触发并且自动完成工作。我究竟做错了什么？

HTML：

        <md-autocomplete
            md-selected-item="selectedItem"
            md-no-cache="true"
            md-search-text="searchText"
            md-items="item in querySearch(searchText)"
            md-item-text="item.name"
            placeholder="Select a Product">
              <span md-highlight-text="searchText">
                 {{ '{{item.originalName}}  ({{item.id}})' }}
              </span>
        </md-autocomplete>

JavaScript：

        function querySearch(query) {
            var results = query ? $scope.products.filter(createFilterFor(query)) : $scope.products;
            return results;
        }


        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(item) {
                return (angular.lowercase(item.originalName).indexOf(lowercaseQuery) === 0);
            };

        }