Typeahead.js and MaterializeCss

[Slashzer-0]

I am trying to integrate typeahead.js into a meteor project. I am using Materialize as the front-end UI framework. Typeahead is breaking the style of the materialize elements. Here's an example: Navbar search before integrating typeahead: On focus the style changed to: Example code is at: http://meteorpad.com/pad/Hcwc2jXvxjeYQJkQc/ Typeahead integration broke color change on focus and also misaligned the buttons. Example code: http://meteorpad.com/pad/MhyaFEbCcjBKdcjHX/

I tried adding !important to all the styles related to .field_input in Materialize. Things improved a bit but still the buttons are misaligned. Code is at: http://meteorpad.com/pad/F9vKN8FGZzPh82fis

How to make typeahead.js play nice with Materialize?

[clemsos]

+1

[sean-stanley]

I think you need to change the styles set on the DOM elements created by twitter typeahead. I just ran into this problem myself and will start working away at it. I'll post any tips and tricks I find here.

[dhf21210]

I ran into this issue a few hours ago. I found a way to make the default materialize behavior work. It might not be the greatest code, but it is working. I create the typeahead on the object in the rendered helper for the template, then unwrap it after. This allows materialize behavior to return. I am pulled in the typeahead.js file to my public folder directly, and explicitly added the jquery package to my app.

I have a working example in meteor pad: http://meteorpad.com/pad/F2AtyRBtZZED2NosC/Materialize%20Navbar%20search%20typeahead

Let me know if any of you have thoughts on how to improve on the work around.

[sean-stanley]

Your solution sounds a bit more elegant than mine. I rewrote the css classes effecting the typeahead behaviour to work when you assume the input is wrapped in a span element. Which is literally the only thing stopping the whole thing working it seems. Here is the changed css classes I used. Unwrapping the span with jQuery when the template is rendered sounds like a better solution.

span.twitter-typeahead {
  display: inherit !important;
}

input.typeahead.tt-input {
  vertical-align: initial !important;
}

.input-field .twitter-typeahead + label:after {
  display: block;
  content: "";
  position: absolute;
  top: 65px;
  opacity: 0;
  transition: 0.2s opacity ease-out, 0.2s color ease-out;
}

.input-field .twitter-typeahead ~ .material-icons {
  position: absolute;
  top: 0;
  right: 1rem;
  color: transparent;
  cursor: pointer;
  font-size: 2rem;
  transition: 0.3s color;
}

.input-field .twitter-typeahead + label {
  left: 1rem;
}

On Thursday, 15 October 2015 at 12:19 pm, dhf21210 wrote:

I ran into this issue a few hours ago. I found a way to make the default materialize behavior work. It might not be the greatest code, but it is working. I create the typeahead on the object in the rendered helper for the template, then unwrap it after. This allows materialize behavior to return. I am pulled in the typeahead.js file to my public folder directly, and explicitly added the jquery package to my app. I have a working example in meteor pad: http://meteorpad.com/pad/F2AtyRBtZZED2NosC/Materialize%20Navbar%20search%20typeahead Let me know if any of you have thoughts on how to improve on the work around.

— Reply to this email directly or view it on GitHub (https://github.com/twitter/typeahead.js/issues/1279#issuecomment-148230634).

[Blenditlikeben]

How would this work with custom templates for search results?

[dhf21210]

@Builder942014 I am not sure what you are trying to accomplish. You just use typeahead as you would regularly use it, but when you create the object in render you unwrap it. More specifics would be needed to assist you. Do you have an example of your issue on meteor pad or anything?

[sean-stanley]