3

Web サイトで 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 を実行してテキストに警告する必要があります。

私のシナリオでは、「一致が見つかりませんでした」と出力する以外は何もしません。

検索するテキストを入力するテキスト入力はありません。

私は何が欠けていますか？

https://jsfiddle.net/p7wc8psy/のjsfiddle

4

2 に答える 2

3

あなたが作っている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"
    }]

display keyJSONのここは何ですか

ここで述べた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;
        }

作業コードはこちら

テストケース: タイプca

お役に立てれば！

于 2015-11-29T08:08:53.147 に答える
0

私はあなたのフィドルを働かせることができません。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)">  // *********
于 2015-11-28T11:00:45.947 に答える