401ChemistryGenealogy / ChemistryGenealogy

401 project for the client: Dr. Todd Lowary
0 stars 1 forks source link

utilize autocomplete in front end #32

Open slmyers opened 8 years ago

slmyers commented 8 years ago

It occurred to me that a nice feature (if its not too much work) would be to have a drop down menu of institutions and individuals for people to pick from. I guess the database could be generated on-the-fly from information put in by people? Realize I know nothing about computing and so this may be a ridiculous request. Thanks, Todd

We should try to use the autocomplete functionality in the various inputs (create/modify information etc). I have an example made: https://github.com/slmyers/md-autocomplete-example

relevant code snippet:

      var app = angular.module('myapp', ['ngMaterial'])
        .controller("autocompleteController", function($http, $q){
          //this searches the backend
          this.querySearch = function(term){
            console.log('in querySearch ' + term)
            var d = $q.defer();
            $http({
              header: 'Content-Type: application/json',
              method: 'POST',
              url: '/search',
              data: {term: term}
            }).then(function (result){
              console.log(result)
              d.resolve(result.data);
            });
            return d.promise;
          }
        });
    </script>
    <div id="searchContainer" >
      <!-- this is the autocomplete thing -->
      <md-autocomplete flex id="searchBar"
        md-no-cache="true"
        md-selected-item="ctrl.selectedItem"
        md-search-text="ctrl.searchText"
        md-items="item in ctrl.querySearch(ctrl.searchText)"
        md-item-text="item.name"
        md-floating-label="Search People"
        md-min-length="1">
        <md-item-template>
          {{item.name}}
        </md-item-template>

      </md-autocomplete>