Typeahead.js: Add option for turning off hint

[jharding]

Who knows, maybe not everyone wants the hint.

[erichiggins]

Just wanted to note that the hint doesn't play nicely when the typeahead input has a placeholder attribute.

[jharding]

Can you explain? Do these examples not work for you? They all use the placeholder attribute.

[erichiggins]

The examples work fine for me. Looking at the example source, it seems that specialized markup might be expected by typeahead. I'm just using a regular <input type=text> with a very slightly customized Bootstrap theme. The hint looks rather messed up too (grayed out/disabled and doesn't match the size of the typeahead input), which also leads me to believe this might be the issue.

If there is expected markup, I'd recommend adding it to your README. It doesn't seem to be documented otherwise (or I missed it completely).

[jharding]

Are you including _typeahead.css_? Also, does the input have a class that you're using to style it with?

[erichiggins]

Yes, I included both typeahead.css and typeahead.js-bootstrap.css, though I renamed them to .less files and imported them to my project's main .less file.

There are no styles being applied to the input other than what Bootstrap normally adds for .form-inline .control-group .controls input.

[jharding]

Hmm weird. No specialized markup is required, typeahead.js generates all of that additional markup you're seeing.

Well if you get time, I'd appreciate it if you could reproduce this in a jsbin so I could debug it. In the meantime, if you'd like, try out this version of typeahead.js. This includes some of the changes I'm working on for v0.9, notably ditching the dependency on _typeahead.css_ and applying the css through javascript. It's still a little buggy, but it might be worth a shot.

[erichiggins]

If I have some time, I'll give both of these a shot tomorrow then report back. Thanks for the quick responses!

[erichiggins]

Here you can see some of the hint wonkiness when integrated with Bootstrap.
Though it's not exactly what I'm seeing in my code, I think it should give you something to work with.

[erichiggins]

I just realized that it only seems reproducible in jsbin when you have the HTML or JavaScript columns open. This leads me to believe that it may have something to do with the float.

[augnustin]

Yes, this feature would be nice. Like in the real twitter search bar, the dropdowns provide links are standalone recommendations (= there is no "right answer" and no search button).

If I can, I'll write this option this afternoon.

[rakshan]

I was having the same issues with the hint being a pixel above the typed text and really not helping. I just used some css to hide it

.tt-hint {
visibility:hidden;
}

[augnustin]

I did not think of css to do that. It's probably a little cleaner (as the library stays untouched) but there still could be some weird behaviours like pressing tab fills the suggestion I guess.

I did change the code like that and it works pretty well. I can't make a pull request to this yet though because it doesn't pass the tests anymore, I need some time to update them. And my version is pretty hacky ...

        if (o.options.hint === false) { // options come as a second argument of .typeahead(datasets, options)
            this.inputView = new InputView({
                input: $input
            });
        } else {
            this.inputView = new InputView({
                input: $input,
                hint: $hint
            });
        }

But I get the expected result : no tt-hint, no suggestions etc. but some events must still be triggered for nothing ...

[igal-getrailo]

so is it possible to disable the hint now? I tried adding

hint: false 

to the options but that didn't do anything.

[sekalska]

Changing the visibility in typeaheadjs.css to hidden doesn't turn off hint, but if visibility: "hidden" is added in "hint" section in the function buildCss in typeahead.bundle.js file, then it works.