Angular UI typeahead startswith
Angular UI typeahead startswith
我的输入有问题。我有一个包含人名和姓氏的字段,如果我输入 A,我希望看到重点放在姓氏上,而不是名字的主角。
这是一个例子:
function TypeaheadCtrl($scope) {
$scope.selected = undefined;
$scope.Person = ['Jane Smith', 'John Smith', 'Sam Smith', 'John Doe','Daniel Doe'];
}
当我键入 S 时,我只想看到 jane smith 和 john smith。有办法吗??
来自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 和 returns 与姓氏与 $viewValue 相匹配的名字。
我假设您希望在 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>
我的输入有问题。我有一个包含人名和姓氏的字段,如果我输入 A,我希望看到重点放在姓氏上,而不是名字的主角。
这是一个例子:
function TypeaheadCtrl($scope) {
$scope.selected = undefined;
$scope.Person = ['Jane Smith', 'John Smith', 'Sam Smith', 'John Doe','Daniel Doe'];
}
当我键入 S 时,我只想看到 jane smith 和 john smith。有办法吗??
来自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 和 returns 与姓氏与 $viewValue 相匹配的名字。
我假设您希望在 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>