md-autocomplete 未显示文本输入答案

【问题标题】：text input not shown with md-autocompletemd-autocomplete 未显示文本输入
【发布时间】：2015-11-26 06:12:23
【问题描述】：

我正在尝试在我的网站中使用 Angular Material 的自动完成组件。

在我的 html 代码中：

     <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display">
          <md-item-template>
              <span md-highlight-text="searchText">{{item.display}}</span>
          </md-item-template>
          <md-not-found>
              No matches found.
          </md-not-found>
      </md-autocomplete>

在我的控制器中，我有以下内容：

app.controller('IndexController', function ($scope) {
    $scope.getMatches = function (text) {
        alert(text);
    }
});

如您所见，我没有实施太多。但如果自动完成功能正在尝试查找某些内容，它应该执行 getMatches 并提醒文本。

在我的场景中，它除了打印“未找到匹配项”之外什么都不做。

没有文本输入可输入要搜索的文本。

我错过了什么？

jsfiddle https://jsfiddle.net/p7wc8psy/

【问题讨论】：

为 md-autocomplete 添加一个名称（用于生成的输入）。
我加了一个name属性，结果都一样
你能提供一个工作小提琴吗？
@iWörk 用 jsfiddle url 更新了主链接。谢谢

标签： angularjs angular-material md-autocomplete

【解决方案1】：

你制作的 DOM 是正确的。

 <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display">
      <md-item-template>
          <span md-highlight-text="searchText">{{item.display}}</span>
      </md-item-template>
      <md-not-found>
          No matches found.
      </md-not-found>
  </md-autocomplete>

但是下面显示的函数是错误的，因为它没有返回任何内容，这就是您得到“未找到匹配项”的原因。

app.controller('IndexController', function ($scope) {
    $scope.getMatches = function (text) {
        alert(text);//this does not return anything
    }
});

现在下一个问题应该返回什么。

它应该返回一个如下所示的 JSON 数组。

[{
        value: "apple",
        display: "apple"
    }, {
        value: "banana",
        display: "banana"
    }, {
        value: "gauva",
        display: "gauva"
    }, {
        value: "melon",
        display: "melon"
    }, {
        value: "potato",
        display: "potato"
    }, {
        value: "carrot",
        display: "carrot"
    }, {
        value: "cauliflower",
        display: "cauliflower"
    }, {
        value: "jasmine",
        display: "jasmine"
    }, {
        value: "cabbage",
        display: "cabbage"
    }, {
        value: "peas",
        display: "peas"
    }]

JSON 中的 display key 是什么

由于您在这里提到了md-item-text="item.display"，因此返回的数组必须具有显示在自动完成下拉菜单中的显示键。

所以我的搜索功能是这样的：

$scope.myDta = [{
            value: "apple",
            display: "apple"
        }, {
            value: "banana",
            display: "banana"
        }, {
            value: "gauva",
            display: "gauva"
        }, {
            value: "melon",
            display: "melon"
        }, {
            value: "potato",
            display: "potato"
        }, {
            value: "carrot",
            display: "carrot"
        }, {
            value: "cauliflower",
            display: "cauliflower"
        }, {
            value: "jasmine",
            display: "jasmine"
        }, {
            value: "cabbage",
            display: "cabbage"
        }, {
            value: "peas",
            display: "peas"
        }];
        $scope.getMatches = function (text) {
            text = text.toLowerCase();
            var ret = $scope.myDta.filter(function (d) {
                //return element which starts with entered text
                return d.display.startsWith(text);
            });
            return ret;
        }

工作代码here

测试用例：输入 ca

希望这会有所帮助！

【讨论】：

感谢您的 jsfiddle，我发现了问题。我没有在我的控制器中加载 ngMaterial，也没有加载 angular-animate 和 angular-aria js 文件。问题解决了。
在这个stackoverflow.com/questions/51528680/…需要帮助

【解决方案2】：

我不能让你的小提琴奏效。我已经努力达到https://jsfiddle.net/p7wc8psy/7/，但我认为你需要最新的角度来运行材料，这很难在 jsFiddle 中加载。您可能想切换到 codepen 或其他方式。

同时，我认为您缺少的是：

<md-autocomplete 
     name="search-drink-autocomplete-input" 
     md-selected-item="selectedItem" 
     md-search-text="searchText" 
     md-items="item in getMatches(searchText)" 
     md-item-text="item.display"
     md-search-text-change="getMatches(searchtext)">  // *********

【讨论】：

在这个stackoverflow.com/questions/51528680/…需要帮助