Javascript 下拉菜单和输入字段使用Angular

我有一个下拉按钮和一个输入字段。如果单击该按钮，它将显示一个用JSON编写的名称列表。我想添加以下内容，但我不确定如何添加：

选择名称时，我希望它显示在输入字段中。 在输入字段中写入时，我希望列表显示与该字母对应的结果。 我希望尽可能多地使用angular，但我当然需要常规javascript或JQuery，这也很好。如果你有问题，请告诉我

---

您可以使用angularStrap typeahead:

您可以在ng repeat上使用过滤器，在输入时过滤选项，如下所示：

<div ng-controller="MainCtrl" class="container">
 <div class="input-group">
      <div class="input-group-btn">
        <button type="button" id="dropdown1" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Name <span class="caret"></span></button>
        <ul aria-labelledby="dropdown1" class="dropdown-menu" role="menu">
          <li ng-repeat="person in persons | filter:selectedPerson"><a ng-click="selectPerson(person)">{{person}}</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input id="personInput" ng-model="selectedPerson" ng-change="toogleDropdown()" type="text"  class="form-control">
    </div><!-- /input-group -->
</div>

---

有趣的是，您的输入框在上面提供的代码中出现在哪里？您发布的图像是否与此代码对应？请查看ui select我相信此链接底部的代码可能就是您要查找的代码。让我知道是否就是这样，如果您在实现它时遇到困难，我已经做了一个JSFIDLE，如果您需要，我可以与您分享。这个解决方案看起来不错，但没有改变任何东西。我的下拉菜单中的项目似乎无法单击。鼠标悬停时不会得到手的形状鼠标悬停按钮时会得到手的形状。我将{x.name}}放在a-tags中，以便标记悬停的项。这使它看起来更好，但它并没有解决我的问题。有什么想法我需要改变吗？我应该写更多的东西来让这一切顺利吗？控制器？不，只有个人数组。ng click属性不会将光标更改为指针指针指针，您必须使用css或a-tag手动执行此操作，光标旁边的其他哪些内容不起作用？是的，我可以使用css更改该部分：以下内容仍然不起作用：1当选择名称时，我希望它显示在输入字段中。没有。2在输入字段中写入时，我希望列表显示与该字母对应的结果。这也没有发生，问题解决了一半。单击下拉列表中的某个人时，他会出现在输入字段中。这很好。但是，在输入字段中写入字母时，我希望出现下拉列表。我希望在添加或删除字母时更改其内容。非常感谢。

<div ng-controller="MainCtrl" class="container">
 <div class="input-group">
      <div class="input-group-btn">
        <button type="button" id="dropdown1" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Name <span class="caret"></span></button>
        <ul aria-labelledby="dropdown1" class="dropdown-menu" role="menu">
          <li ng-repeat="person in persons | filter:selectedPerson"><a ng-click="selectPerson(person)">{{person}}</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input id="personInput" ng-model="selectedPerson" ng-change="toogleDropdown()" type="text"  class="form-control">
    </div><!-- /input-group -->
</div>

app.controller('MainCtrl', function ($scope) {

$scope.selectedPerson = "";

$scope.toogleDropdown = function(){
    if($scope.selectedPerson.length>3){
        $('#dropdown1').dropdown('toggle');
    }
    $('#personInput').focus();
}

$scope.selectPerson = function(person){
    $scope.selectedPerson = person;
}

$scope.persons = ['donald','polsie'];
});