Cant hide footer

[jonocodes]

I am trying to hide the footer and have tried several things like not specifying a footerTemplate or directing it to an empty controller property.

The only way I have been able to hide it is by commenting out this line: https://github.com/thefrontside/ember-cli-twitter-typeahead/blob/cc0162fcf8d4cd0b08a6a234bc3468517b39fd8c/app-addon/components/twitter-typeahead.js#L65

Perhaps footer should be fetching from this.get('footerTemplate')

[vhf]

I'm having the same issue.

[andessen]

Agreed, seems to fix things. Has anyone resolved this otherwise? Didn't want to have to fork this.

[Dhaulagiri]

The real problem is that neither footerTemplate nor emptyTemplate are actually respected in the code. I am definitely open to PRs that rectify this and make the component not show either if they are not specified. We should also add the ability to pass in a suggestionTemplate as well (see #10)

[andessen]

Agreed. Also how to style it wasn't obvious, adding that to the readme would be nice. I found a resource online that helped:

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 422px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}```

[Dhaulagiri]

@andessen that seems more an implementing detail with typeahead.js. Is there a resource we can link to?

[andessen]

I found this quite helpful. http://stackoverflow.com/questions/20198247/twitters-typeahead-js-suggestions-are-not-styled-have-no-border-transparent-b

[andessen]

I'm also struggling to figure out how to bind the autocompleted value to the ember controller. If I use value then it binds what the user as typed and not the autocomplete (e.g. value will be "purp" if I tab to purple and move on to the next control).

[Dhaulagiri]

That is a separate issue @andessen that needs to be fixed

[andessen]

True, apologies. I was happy to have a dialogue w/ you here haha. So I was able to fix it on my local fork. This is what I changed to get the value to bind.

   keyUp(event) {
-    if (event.which === 13) {
+    if (event.which === 13 || event.which === 9) {
       const $dropdownMenu = this.$().siblings('.tt-dropdown-menu');
       const $suggestions = $dropdownMenu.find('.tt-suggestion:not(.enter-suggest)');
       if ($suggestions.length) {
         $suggestions.first().click();
+        this.setSelectionValue()
       } else {
         this.sendAction('on-select-without-match', this, this.$().val());
       }
@@ -73,7 +74,7 @@ export default Ember.TextField.extend({
           }
         },
         empty() {
-          return "<span class='tt-suggestion enter-suggest'>Empty</span>";
+          return "<span class='tt-suggestion enter-suggest'>No Results</span>";
         }
       }
       /* jshint unused:false */
@@ -101,6 +102,7 @@ export default Ember.TextField.extend({
   setSelectionValue() {
     const selection = this.get('selection');
     if (selection) {
+      this.set('value', get(selection, this.get('displayKey')));
       this.$().typeahead('val', get(selection, this.get('displayKey')));
     }
   },

[andessen]

@Dhaulagiri :up: