Geek Answers Handbook

Two-field search using Bootstrap Typeahead in AngularJS

There are two fields in my JSON: first_nameand last_name.

I want to use Bootstrap typeahead.js using Angular-UI.

<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">

What would be added to the typeaheadsearch field also in last_name? What would I add to the template to display both the first and last names when choosing?

If the Angular -ui directive does not have this function, then, I think, I just bind the first and last name on one line.

UPDATE: 9/15/14 Any idea how to display the first and last name in the search results?

+4
source share
3

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;

: /​​ , , .

+5

, , michael0x2a :

 <input type="text" 
       ng-model="result" 
       typeahead="patient as patient.first_name + ' ' + patient.last_name for patient in filterByName(ngGridUsersData.patients, $viewValue)" 
       typeahead-template-url="customTemplate.html">
+3

AngularJS UI Bootstrap - Typeahead - :

"uib-typeahead" - , , .

uib-typeahead="patient as (patient.first_name + ' ' + patient.last_name) for patient in $ctrl.patients | filter:$viewValue | limitTo:8"
+1

More articles:


All Articles