ach*_*322 4 javascript twitter-bootstrap angularjs typeahead.js angular-ui-typeahead
我的JSON中有两个字段:first_name和last_name.
我想使用Angular-UI使用Bootstrap typeahead.js.
<script type="text/ng-template" id="customTemplate.html">
<a>
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</a>
</script>
<input type="text" ng-model="result" typeahead="patient as patient.first_name for patient in ngGridUsersData.patients | filter:{first_name:$viewValue}" typeahead-template-url="customTemplate.html">
Run Code Online (Sandbox Code Playgroud)
我还要在typeahead字段中添加什么来搜索last_name?我会在模板中添加什么来在选择时显示名字和姓氏?
如果angular-ui指令没有这个功能,那么我想我只会将名字和姓氏连接成一个字符串.
更新: 9/15/14知道如何在搜索结果中显示名字和姓氏吗?
您可以尝试为typeahead使用自定义函数,而不是使用过滤器:
<input type="text"
ng-model="result"
typeahead="patient as patient.first_name for patient in filterByName(ngGridUsersData.patients, $viewValue)"
typeahead-template-url="customTemplate.html">
// ...snip...
function filterByName(patients, typedValue) {
return patients.filter(function(patient) {
matches_first_name = patient.first_name.indexOf(typedValue) != -1;
matches_last_name = patient.last_name.indexOf(typedValue) != -1;
return matches_first_name || matches_last_name;
});
}
$scope.filterByName = filterByName;
Run Code Online (Sandbox Code Playgroud)
警告:我没有测试过这段代码/从我的项目中抽出它,所以可能会有一两个错误需要进行一些调整才能修复.