Typeahead.js: Option to open the dropdown menu above the input element

[jmullo]

Most of the autocomplete libraries seem to lack this feature.

I can't be the only one who needs it... any forks done? :)

[wboevink]

+1

[nadeemelahi]

Hi, if you open up typeahead.bundle.js and scroll down to line 760 you will see the styles for dropdown: { ... }. There you will see the style
top: "100%"
so change it to
bottom: "100%"
and it will open above instead.
hehe

[jfly]

@nadeemelahi, that suggestion doesn't work for me. Has anyone got a workaround for this?

edit: I played around with this a bit, discovered that I'm using https://github.com/bassjobsen/typeahead.js-bootstrap-css, which defines some !important styles which made it difficult to customize the position of the dropdown (actually, dropup now =))

[danielbalog]

@jfly What exactly did you do to get it working with typeahead.css? I would also be interested in this.

[jfly]

@danielbalog see my workaround here https://github.com/jfly/ccm/blob/0c0606ccee00cd391b6f8f168968c2c4b553c101/css/ccm.css#L66. Let me know if it works for you!

[nadeemelahi]

The styles are set in the js file, you have to edit the styles in the js file -namely line 760.
Or just use the search algorithm and design your own styles like I did here:
http://www.webscripts.biz:8082/js/myjscript.js --see the findMatches function, that is doing the search, I just tweaked the one in the typeahead example so that it search for multiple words instead of just one.

[pratik2306]

Just Set CSS as below:

.tt-menu.tt-open{
bottom:100% !important;
top:auto!important;
}

it will open suggestion up