Angular UI typeahead 开始于答案

【问题标题】：Angular UI typeahead startswithAngular UI typeahead 开始于
【发布时间】：2015-01-14 22:44:37
【问题描述】：

我对预先输入有疑问。我有一个包含人名和姓氏的字段，如果我输入 A，我希望看到焦点在姓氏上，而不是在名字的主角上。

这是一个例子：

 function TypeaheadCtrl($scope) {
        $scope.selected = undefined;
        $scope.Person = ['Jane Smith', 'John Smith', 'Sam Smith', 'John Doe','Daniel Doe'];
    }

当我输入 S 时，我只想看到 jane smith 和 john smith。有办法吗？？

plunker：http://plnkr.co/edit/inwmqYCCRsjs1G91Sa3Q?p=preview

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap angular-ui-typeahead

【解决方案1】：

我假设您希望 sourceArray 中列出的每个项目都仅突出显示姓氏的搜索词。如果不修改指令本身，这是不可能的，但我有一个替代解决方案，虽然它也突出显示名字中的搜索词（如果匹配），ONLY 呈现与搜索词匹配的姓氏的人的结果。我希望这会有所帮助：

angular.module("firstChar", ["ui.bootstrap"]);

angular.module("firstChar").controller("TypeaheadCtrl", function($scope, $filter) {
  $scope.selected = undefined;
  
  // ==========================================================
  // You would have to replace the JSON assignment code below
  // with a call to $http.get, to get that file you talked
  // about in your comment below:
  //
  // $http.get('OutAnagrafica.json').success(function (data) {
  //    $scope.OutAnagrafica = data;
  // });
  //
  // ==========================================================
  
  $scope.OutAnagrafica = [
    {
        "Name": "Jane Smith"
    },
    {
        "Name": "John Smith"
    },
    {
        "Name": "Sam Smith"
    },
    {
        "Name": "Sam Northrop"
    },
    {
        "Name": "John Doe"
    },
    {
        "Name": "Daniel Doe"
    }
  ];
  
  $scope.persons = $scope.OutAnagrafica.map(function (person) {
    var nameParts = person.Name.split(" "),
        name = nameParts[0],
        surname = nameParts.slice(1).join(" ");
    
    return {
      "name": name,
      "surname": surname
    };
  });
  
  $scope.getPersonsFromSurnames = function(searchTerm) {
    return $filter("filter")($scope.persons.map(function (person) {
      return {
        "fullname": person.name + " " + person.surname,
        "surname": person.surname
      };
    }), {
      "surname": searchTerm
    });
  }
});

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="firstChar">
  <div class="container-fluid" ng-controller="TypeaheadCtrl">
    <div>Selected: <span>{{selected}}</span>
    </div>
    <div>
      <input type="text" ng-model="selected" typeahead="person.fullname for person in getPersonsFromSurnames($viewValue)">
    </div>
  </div>
</div>

【讨论】：

非常感谢您的回答！这就是我要的！但是如果我有一个这样的 json 文件： [ { " Name": "jane Smith" }, { "Name": "John Smith" }, { "Name": "Sam Smith" } ] 我该如何拆分它？
我在我的项目中通过 http 调用读到了这个： $http.get('OutAnagrafica.json') .success(function (data) { $scope.OutAnagrafica = data; });跨度>
您的意思是您需要重新处理您的 JSON 以将姓名与姓氏分开吗？因为 getPersonsFromSurnames 所做的基本上是在从姓名中提取姓氏后进行过滤。如果您想要的是对其进行预处理然后简化搜索，我们也可以这样做。告诉我。
如果您只需要处理从 $http.get 调用中获得的 JSON 数据并将其拆分为“name”和“surname”字段，那么您只需要执行以下操作：@ 987654323@
嗯，是的，我认为我可以拆分字段，这样我就可以像您制作的第一个示例一样根据姓氏进行过滤。什么是最好的解决方案？

【解决方案2】：

来自http://angular-ui.github.io/bootstrap/#/typeahead，看着这一行

<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">

你可以做类似的事情

<input type="text" ng-model="selected" typeahead="name for name in getPersonLastName($viewValue)">

意味着您有一个 getPersonLastName 函数，该函数查看 $scope.Person 并返回与姓氏与 $viewValue 匹配的名称。

【讨论】：