如何在AngularJS和MVC4中开发自动完成文本框。I'；我是安格拉斯的新手

我的设想： 我的MVC控制器返回的JSON数据是字符串数组

我尝试了所有可能的解决方案，比如TwitterBootstrapTypeahed，但没有任何效果。 我读过文件，但对我来说也不管用。 有人能解释一下如何一步一步地实现自动完成吗？

---

我已经使用jQuery实现了它，但我不想使用jQuery，因为Angular不知道jQuery对DOM的更新。

最后，我使用Angular材质实现了自动完成，它的效果非常好。 以下是在Angularjs和MVC4中创建自动完成的步骤

步骤1： 角度材质依赖于
angular-animate.js
角度咏叹调js
angular-messages.js

在bundle配置中注册这些js文件：

bundles.Add(new ScriptBundle("~/bundles/angularanimatejs").Include("~/Scripts/angular-animate.js"));
bundles.Add(new ScriptBundle("~/bundles/angularariajs").Include("~/Scripts/angular-aria.js"));
bundles.Add(new ScriptBundle("~/bundles/angularmessagesjs").Include("~/Scripts/angular-messages.js"));

同时注册两个css文件： bundles.Add（新样式bundle（“~/Content/angularmatorialcss”）。包括（“~/Content/angularmatories.css”）； 添加（新样式包（“~/Content/angularmatiallayoutcss”）。包括（“~/Content/angularmatilllayout.css”）

现在将这些文件包括在共享或您的页面中：

@Styles.Render("~/Content/angularmaterialcss")
@Styles.Render("~/Content/angularmateriallayoutcss")
@Scripts.Render("~/bundles/cdnangularjs")
@Scripts.Render("~/bundles/cdnangularresourcejs")
@Scripts.Render("~/bundles/angularanimatejs")
@Scripts.Render("~/bundles/angularariajs")
@Scripts.Render("~/bundles/angularmessagesjs")
@Scripts.Render("~/bundles/angularmaterialjs")
@Scripts.Render("~/bundles/appjs")

现在在cshtml页面中添加html代码：

<div class="autocompletedemoBasicUsage" ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="">
<md-content class="md-padding">
    <form ng-submit="$event.preventDefault()">
        <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
        <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0" placeholder="What is your favorite US state?">
            <md-item-template>
                <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
            </md-item-template>
            <md-not-found>
                No states matching "{{ctrl.searchText}}" were found.
                <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
            </md-not-found>
        </md-autocomplete>
        <br>
        <md-checkbox ng-model="ctrl.simulateQuery">Simulate query for results?</md-checkbox>
        <md-checkbox ng-model="ctrl.noCache">Disable caching of queries?</md-checkbox>
        <md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox>

        <p>By default, <code>md-autocomplete</code> will cache results when performing a query.  After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>
    </form>
</md-content>

将以下代码写入app.js文件：

(function ()
{
'use strict';
angular
.module('StockMarketApp', ['ngMaterial', 'ngMessages'])
.controller('DemoCtrl', DemoCtrl);

function DemoCtrl($timeout, $q, $log)
{
    var self = this;

    self.simulateQuery = false;
    self.isDisabled = false;
    // list of `state` value/display objects
    self.states = loadAll();
    self.querySearch = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange = searchTextChange;

    self.newState = newState;

    function querySearch(query)
    {
        var results = query ? self.states.filter(createFilterFor(query)) : self.states,
        deferred;
        if (self.simulateQuery)
        {
            deferred = $q.defer();
            $timeout(function ()
            {
                deferred.resolve(results);
            }, Math.random() * 1000, false);
            return deferred.promise;
        } else
        {
            return results;
        }
    }

    function searchTextChange(text)
    {
        $log.info('Text changed to ' + text);
    }

    function selectedItemChange(item)
    {
        $log.info('Item changed to ' + JSON.stringify(item));
    }

    function loadAll()
    {
        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
            Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
            Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
            Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
            North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
            South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
            Wisconsin, Wyoming';

        return allStates.split(/, +/g).map(function (state)
        {
            return 
            {
                value: state.toLowerCase(),
                display: state
            };
        });
    }

    function createFilterFor(query) 
    {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(state) 
        {
            return (state.value.indexOf(lowercaseQuery) === 0);
        };
    }
}
})();

Angularjs材料自动完成演示-

一旦您有一个运行自动完成文件的演示，然后根据需要修改它

---

对于bootstrap-typeahead，另一个链接-

最后，我能够使用bootstrap-typeahead开发角度自动完成文本框

要使用返回JSON数据的服务开发angular bootstrap typeahead，请执行以下步骤： 您需要注册：
jquery.js
bootstrap.js
angular.js

要使用引导，您需要添加角度引导依赖项javascript文件：
ui-bootstrap-tpls-0.14.3.js

在捆绑包配置中，注册以下文件：

        bundles.Add(new ScriptBundle("~/bundles/cdnjquery").Include("~/Scripts/jquery2.1.4.js"));
        bundles.Add(new ScriptBundle("~/bundles/cdnbootstrapjs").Include("~/Scripts/bootstrap.min.js"));
        bundles.Add(new ScriptBundle("~/bundles/cdnangularjs").Include("~/Scripts/angular1.4.5.js"));
        bundles.Add(new ScriptBundle("~/bundles/cdnangularresourcejs").Include("~/Scripts/angular-resource.js"));
        bundles.Add(new ScriptBundle("~/bundles/appjs").Include("~/Scripts/app.js"));

        bundles.Add(new ScriptBundle("~/bundles/angularbootstrapjs").Include("~/Scripts/ui-bootstrap-tpls-0.14.3.js"));
        bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include("~/Content/bootstrap.css"));

在cshtml文件中添加以下代码：

在共享或各自的.cshml文件中呈现脚本和css:

@Styles.Render("~/Content/bootstrapcss")
@Scripts.Render("~/bundles/cdnjquery")
@Scripts.Render("~/bundles/cdnbootstrapjs")
@Scripts.Render("~/bundles/cdnangularjs")
@Scripts.Render("~/bundles/angularbootstrapjs")
@Scripts.Render("~/bundles/appjs")

在各自的cshtml文件中编写以下代码：

<h4>Get Quote</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-model="selected" uib-typeahead="stock.NAME_OF_COMPANY for stock in stocks | filter:$viewValue | limitTo:8" class="form-control">

我的JSON数据包含：
数据符号
数据。公司名称

我想显示公司的data.NAME，所以如果您签入chtml代码，我已经写了：
uib typeahead=“stock.NAME”库存公司的名称

通过这种方式，您可以使用angularjs和bootstrap创建一个typeahead

---

希望这能帮助像我这样偶然发现的人。

文档中有一些工作示例：我尝试过，但效果也不太好。我所做的是，我成功地使用了角材料。

var StockMarketApp = angular.module("StockMarketApp", ["ngResource", "ui.bootstrap"]);

StockMarketApp.controller('StockController', function ($scope, $http) {
  $scope.stocks = undefined;

   $scope.fnGetQuoteDataForAutoComplete = function () {
    //$scope.getQuote = 'dhfl';
    $http.get("/EquityList/GetStockNamesForAutoComplete")
            .success(function (data, status, headers, config) {
                $scope.stocks = angular.fromJson(data)
            })
        .error(function (data, status, headers, config) {
        });
  };
});