Discovery Incremental Search

discovery-incremental-search.markdown

Discovery Incremental Search

A Pen by Pral2a on CodePen.

License.

index.html

<div ng-controller="IncrementalSearch as searchAssets" layout="column" ng-cloak="" ng-app="MyApp">
  <md-content class="md-padding">
    <p ng-repeat="asset in searchAssets.assetsSelected">{{asset.id}}
      <md-button class="md-raised md-warn" ng-click="searchAssets.assetsSelectedRemove(asset)">Remove</md-button>
    </p>
    <form ng-submit="$event.preventDefault()">
      <md-autocomplete md-min-length="3" md-selected-item="searchAssets.selectedItem" md-search-text="searchAssets.searchText" md-selected-item-change="searchAssets.selectedItemChange(item)" md-items="item in searchAssets.querySearch(searchAssets.searchText)" md-item-text="item.id" md-min-length="0"
        md-no-cache="true" placeholder="Search assets...">
        <md-item-template>
          <strong md-highlight-text="searchAssets.searchText" md-highlight-flags="^i">{{item.id}}
          </strong>
        </md-item-template>
        <md-not-found>
          No asset matching "{{searchAssets.searchText}}" was found.
        </md-not-found>
      </md-autocomplete>
    </form>
  </md-content>
</div>

script.js

(function() {
  'use strict';
  angular
    .module('MyApp')
    .controller('IncrementalSearch', IncrementalSearch);

  function IncrementalSearch($q, $log, $filter, $http) {
    var vm = this;

    vm.simulateQuery = true;
    vm.querySearch = querySearch;
    vm.selectedItemChange = selectedItemChange;
    vm.assetsSelectedRemove = assetsSelectedRemove;
    vm.assetsSelected = [];
    vm.assetsLoaded = [];
    vm.deferred = null;

    function querySearch(query) {
      vm.deferred = $q.defer();
      var jsonquery = "";
      if (query !== null && query !== "")
        jsonquery = "&query=" + query.replace(/\s/g,"+");
      $http({
        method: 'GET',
        url: 'https://discovery.organicity.eu/v0/assets/metadata/search?' + jsonquery
      }).then(
        function successCallback(response) {
          vm.deferred.resolve(vm.assetsLoaded = response.data);
        },
        function errorCallback(response) {});
      return vm.deferred.promise;
    }

    function selectedItemChange(item) {
      if (item) {
        //check if item is already selected
        if ($filter('filter')(vm.assetsSelected, function(d) {
            return d.id === item.id;
          })[0]) {} else {
          //add id to object
          vm.assetsSelected.push(item);
        }
        // clear search field
        vm.searchText = '';
        vm.selectedItem = undefined;

        //somehow blur the autocomplete focus
        $mdAutocompleteCtrl.blur();
      }
    }

    function assetsSelectedRemove(item) {
      var index = vm.assetsSelected.indexOf(item);
      vm.assetsSelected.splice(index, 1);
    }
  }
})();

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

styles

<link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.css" rel="stylesheet" />