jquery - CSS issue on Twitter Typeahead with Bootstrap 3

Question

Welcome To Ask or Share your Answers For Others

jquery - CSS issue on Twitter Typeahead with Bootstrap 3

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

jquery - CSS issue on Twitter Typeahead with Bootstrap 3

With the release of Bootstrap 3. Typeahead has been removed in favor of this:
https://github.com/twitter/typeahead.js

Ive integrated it successfully on remote fetching of data

but Im having problem with the autocompletion

enter image description here

as you can see there are two text appearing on the textbox.

I've included the css (https://github.com/jharding/typeahead.js-bootstrap.css) as said in the documentation but no luck.

any help or suggestion would be appreciated.

jsfiddle showing the issue:
http://jsfiddle.net/KrtB5/

HTML

<body>
    <div class="container">
        <label>State</label> <input type="text" class="typeahead form-control" />
    </div>
</body>

Javascript:

$('.typeahead').typeahead({
    name: 'Some name',
    local: ['test', 'abc', 'def']
})

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:13:26+0000

EDIT: Updated for Bootstrap 3.0 EDIT 2: Typeahead call was modified. See new jsfiddle

After playing around with the styling it looks like the form-control class doesn't quite line-up with the tt-hint. So I made sure the margins and borders line up. Taking Hieu Nguyen's answer and adding border-radius and support for input-small/input-large

CSS

.twitter-typeahead .tt-hint
{
    display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius:4px;
}

.twitter-typeahead .hint-small
{
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.5;
}

.twitter-typeahead .hint-large
{
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
    line-height: 1.33;
}

Script for input-small/input-large

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

Updated jsfiddle: http://jsfiddle.net/KrtB5/542/

Categories

jquery - CSS issue on Twitter Typeahead with Bootstrap 3

jquery - CSS issue on Twitter Typeahead with Bootstrap 3

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags