Basic usage

Invenio-Search-Js help you easily display results from the Invenio REST API.

The angular module has been split in different directives which each one is responsible for a specific action on the app.

Initialize the app

<script src="path/to/angular.js"></script>
<script src="path/to/invenio-search-js.js"></script>
<script>
  // Bootstrap the angular app to the specific `div` with id `search`
  angular.element(document).ready(function() {
    angular.bootstrap(
      document.getElementById("search"), ['invenioSearch']
    );
  });
</script>

Example only with only search results

We have the following API and we'd like to display the results with the invenio-search-js.

$ curl /api/super/cities

{
  hits: {
    total: 2
  },
  data: [
    {
      "name": "Harley Quinn",
      "city": "Midway"
    },
    {
      "name": "Jessica Jones",
      "city": "New York"
    }
  ]
}

For this example we'll use the <invenio-search-results> directive for displaying the results.

<div id="search">
  <invenio-search search-endpoint="/api/super/cities">
    <invenio-search-results template="results.html"></invenio-search-results>
  </invenio-search>
</div>

The results.html will look like this:

<ul>
  <li ng-repeat="hero in vm.invenioSearchResults.data track by $index">
    <h5>{{ hero.name }}</h5>
    <p>{{ hero.city }}</p>
  </li>
</ul>

Note: the vm.invenioSearchResults contains the response of the API hence we use vm.invenioSearchResults.data to iterate the results.

A more complex example

We have the following API and we'd like to display the results with the invenio-search-js and include number of results, pagination and loading message.

$ curl /api/super/cities

{
  hits: {
    total: 6
  },
  data: [
    {
      "name": "Harley Quinn",
      "city": "Midway"
    },
    {
      "name": "Jessica Jones",
      "city": "New York"
    },
    {
      "name": "Luke Cage",
      "city": "New York"
    },
    {
      "name": "Batman",
      "city": "Gotham"
    },
    {
      "name": "Iron Man",
      "city": "New York"
    },
    {
      "name": "Flash",
      "city": "Central"
    }
  ]
}

<div id="search">
  <invenio-search search-endpoint="/api/super/cities">
    <!-- search bar -->
    <invenio-search-bar template="searchBar.html" placeholder="Start typing"></invenio-search-bar>
    <!-- number of results -->
    <invenio-search-count template="count.html"></invenio-search-count>
    <!-- loading message -->
    <invenio-search-loading template="loading.html" message="Loading"></invenio-search-loading>
    <!-- search results -->
    <invenio-search-results template="results.html"></invenio-search-results>
    <!-- search pagination -->
    <invenio-search-pagination template="pagination.html"></invenio-search-pagination>
  </invenio-search>
</div>

`searchBar.html`

<input placeholder="{{ placeholder }}" ng-model="vm.userQuery" />

Note: ng-model="vm.userQuery" is important for mapping the user input to the application.

Also the request parameter for search will always be q. For example if user types Harley the API request will be GET /api/super/cities/?q=Harley

`count.html`

<p>{{ vm.invenioSearchResults.hits.total }}</p>

Note: vm.invenioSearchResults.hits.total is returned by the server.

`loading.html`

<div ng-show="vm.invenioSearchLoading">{{ loadingMessage }}</div>

You have access to vm.invenioSearchLoading which indicates if there is any ongoing request, you can use it in any template inside the app.

`results.html`

<ul>
  <li ng-repeat="hero in vm.invenioSearchResults.data track by $index">
    <h5>{{ hero.name }}</h5>
    <p>{{ hero.city }}</p>
  </li>
</ul>