角度材质自动完成不加载选项MVC

Question

我正在使用Angular JS - Material在C＃ASP.NET MVC中处理我的AutoComplete小部件。

在这个例子中，我试图让状态的自动完成工作。我从这个tutorial开始，但是需要让选项来自数据库（此时，只是控制器中的静态选项列表）。

这是我当前代码（相关文件）的link。

当我运行代码时，我可以看到控制器中的对象列表正确地通过 - 一个包含Id和名称的4个对象的数组（如我的控制器方法所示）。但是，选项未加载到输入表单中。

当我点击文本框时，我会得到一个＆＃34;选项＆＃34;说No states matching "" were found.如果我输入＆＃39; a＆＃39;，我会得到＆＃34;选项＆＃34;那就是说No states matching "a" were found.如果实际上没有匹配的结果，我就会发生这种情况。

我的问题：如何更改我的代码以使用我从控制器中提取的内容加载选项？

提前致谢！

Answer 1

这是结果的屏幕截图：

这是关键的JavaScript / AngularJS代码：

//TODO: Replace data.json with /Home/GetStates
$http.get('data.json')
  .then(function(response) {
    self.states = response.data.map(function(state) {
      return {
        value: state.Name.toLowerCase(),
        display: state.Name
      };
    });
  });

您需要将'data.json'替换为'/Home/GetStates'才能调用后端MVC JSON RESTful API服务。请注意，我还保留了querySearch(query)和createFilterFor(query)函数，并将self.states=loadStates()更改为self.states=null，因为$http.get()服务现在将加载状态。

我测试了你的C＃MVC控制器代码，一切看起来都不错。

这是一个工作的Plunker，http://plnkr.co/edit/tDC6KcO1O8VSGwVghBo7?p=preview。

希望这会有所帮助。如果您还有其他需要，请告诉我。

Answer 2

以下是我为解决问题所做的工作：

1. 已更改为POST
2. 设置变量=结果，然后返回结果

以下是代码：

function querySearch(query) {
  if (query == undefined) {
    console.log("invalid");
    return;
  }
  $http({
    method: 'POST',
    url: self.URL_Get + query,
    searchTerm: query
  }).then(function(response) {
    self.states = response.data;
  });
  return self.states;
}