feat(v2): modification for v2

- Add a no result screen. Fixes #92
- Change class prefix. Fixes #102
- Add a transformData option

dev/app.js

@@ -6,7 +6,8 @@ docsearch({
   inputSelector: '#search-input',
   autocompleteOptions: {
     debug: true
-  }
+  },
+  docsearchInput: true
 });
 
 document.getElementById('search-input').focus();

src/lib/DocSearch.js

@@ -40,9 +40,11 @@ class DocSearch {
       debug: false,
       hint: false,
       autoselect: true
-    }
+    },
+    transformData = false,
+    docsearchInput = false
   }) {
-    DocSearch.checkArguments({apiKey, indexName, inputSelector, debug, algoliaOptions, autocompleteOptions});
+    DocSearch.checkArguments({apiKey, indexName, inputSelector, debug, algoliaOptions, autocompleteOptions, transformData, docsearchInput});
 
     this.apiKey = apiKey;
     this.appId = appId;
@@ -52,15 +54,19 @@ class DocSearch {
     let autocompleteOptionsDebug = autocompleteOptions && autocompleteOptions.debug ? autocompleteOptions.debug: false;
     autocompleteOptions.debug = debug || autocompleteOptionsDebug;
     this.autocompleteOptions = autocompleteOptions;
+    this.autocompleteOptions.cssClasses = {
+      prefix: 'ds'
+    };
 
     this.client = algoliasearch(this.appId, this.apiKey);
     this.client.addAlgoliaAgent('docsearch.js ' + version);
 
     this.autocomplete = autocomplete(this.input, autocompleteOptions, [{
-      source: this.getAutocompleteSource(),
+      source: this.getAutocompleteSource(transformData),
       templates: {
         suggestion: DocSearch.getSuggestionTemplate(),
-        footer: templates.footer
+        footer: templates.footer,
+        empty: DocSearch.getEmptyTemplate()
       }
     }]);
     this.autocomplete.on(
@@ -108,14 +114,18 @@ class DocSearch {
    * @returns {function} Method to be passed as the `source` option of
    * autocomplete
    */
-  getAutocompleteSource() {
+  getAutocompleteSource(transformData) {
     return (query, callback) => {
       this.client.search([{
         indexName: this.indexName,
         query: query,
         params: this.algoliaOptions
       }]).then((data) => {
-        callback(DocSearch.formatHits(data.results[0].hits));
+        let hits = data.results[0].hits;
+        if (transformData) {
+          hits = transformData(hits) || hits;
+        }
+        callback(DocSearch.formatHits(hits));
       });
     };
   }
@@ -187,6 +197,12 @@ class DocSearch {
     return null;
   }
 
+  static getEmptyTemplate() {
+    return (args) => {
+      return Hogan.compile(templates.empty).render(args);
+    };
+  }
+
   static getSuggestionTemplate() {
     const template = Hogan.compile(templates.suggestion);
     return (suggestion) => {

src/lib/templates.js

@@ -27,6 +27,19 @@ let templates = {
     <div class="${footerPrefix}">
       Search by <a class="${footerPrefix}--logo" href="https://www.algolia.com/docsearch">Algolia</a>
     </div>
+  `,
+  empty: `
+  <div class="${suggestionPrefix}">
+    <div class="${suggestionPrefix}--wrapper">
+        <div class="${suggestionPrefix}--content ${suggestionPrefix}--no-result">
+            <div class="${suggestionPrefix}--title">
+                <div class="${suggestionPrefix}--text">
+                    No results found for query <b>{{{query}}}</b>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
   `
 };
 

src/styles/main.scss

@@ -6,7 +6,7 @@
 // - Adding a second colum to let the content breath if enough room available
 
 // Main autocomplete wrapper
-.aa-dropdown-menu {
+.ds-dropdown-menu {
   background-color: #FFF;
   border: 1px solid #333;
   border-radius: 4px;
@@ -56,10 +56,10 @@
 }
 
 // Selected suggestion
-.aa-cursor .algolia-docsearch-suggestion--content {
+.ds-cursor .algolia-docsearch-suggestion--content {
   color: $color-selected-text;
 }
-.aa-cursor .algolia-docsearch-suggestion {
+.ds-cursor .algolia-docsearch-suggestion {
   background: $color-selected-background;
 }
 
@@ -79,10 +79,10 @@
   border-top: 1px solid lighten($color-border, 60%);
 }
 
-  .algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content,
-  .algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content {
-    border-top: 0;
-  }
+.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content,
+.algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content {
+  border-top: 0;
+}
 
 .algolia-docsearch-suggestion--subcategory-inline {
   display: inline-block;
@@ -121,7 +121,7 @@
 // BREAKPOINT 1:
 // Screen is big enough to display the text snippets
 @media (min-width: $breakpoint-medium) {
-  .aa-dropdown-menu {
+  .ds-dropdown-menu {
     min-width: $dropdown-min-width-medium;
   }
   .algolia-docsearch-suggestion--text {
@@ -134,7 +134,7 @@
 // BREAKPOINT 2:
 // Screen is big enough to display results in two columns
 @media (min-width: $breakpoint-large) {
-  .aa-dropdown-menu {
+  .ds-dropdown-menu {
     min-width: $dropdown-min-width-large;
   }
   .algolia-docsearch-suggestion {

test/DocSearch-test.js

@@ -168,7 +168,7 @@ describe('DocSearch', () => {
       // Then
       expect(typeof actual.algoliaOptions).toEqual('object');
       expect(actual.algoliaOptions.anOption).toEqual(42);
-      expect(actual.autocompleteOptions).toEqual({debug: false,   anOption: 44});
+      expect(actual.autocompleteOptions).toEqual({debug: false, "cssClasses": { "prefix": "ds" }, anOption: 44});
     });
     it('should instantiate algoliasearch with the correct values', () => {
       // Given
@@ -205,7 +205,7 @@ describe('DocSearch', () => {
 
       // Then
       expect(AutoComplete.calledOnce).toBe(true);
-      expect(AutoComplete.calledWith($input, {anOption: '44', debug: false})).toBe(true);
+      expect(AutoComplete.calledWith($input, {anOption: '44', "cssClasses": { "prefix": "ds" }, debug: false})).toBe(true);
     });
     it('should listen to the selected and shown event of autocomplete', () => {
       // Given