bootstrap autocomplete

Question

Stefce 146 Posting Pro

8 Years Ago

Hello guys i want to make inputbox which will autocomplete the started word so you know what i mean like google, facebook who have autocomplete but i have a little problem i have searched and found some plugins and tutorials but actually none of them work i dont know why, maybe its because my old code i would like someone take a look at my code and tell me if is there some bad code which stops the autocomplete.

<script type="text/javascript">
        $(document).ready(function(){
            $('input.typeahead').typeahead({
                name: 'accounts',
                local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']
            });
        });  
    </script>
    <style type="text/css">
        .bs-example{
            font-family: sans-serif;
            position: relative;
            margin: 100px;
        }
        .typeahead, .tt-query, .tt-hint {
            border: 2px solid #CCCCCC;
            border-radius: 8px;
            font-size: 24px;
            height: 30px;
            line-height: 30px;
            outline: medium none;
            padding: 8px 12px;
            width: 396px;
        }
        .typeahead {
            background-color: #FFFFFF;
        }
        .typeahead:focus {
            border: 2px solid #0097CF;
        }
        .tt-query {
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        }
        .tt-hint {
            color: #999999;
        }
        .tt-dropdown-menu {
            background-color: #FFFFFF;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            margin-top: 12px;
            padding: 8px 0;
            width: 422px;
        }
        .tt-suggestion {
            font-size: 24px;
            line-height: 24px;
            padding: 3px 20px;
        }
        .tt-suggestion.tt-is-under-cursor {
            background-color: #0097CF;
            color: #FFFFFF;
        }
        .tt-suggestion p {
            margin: 0;
        }
    </style>





<!-- ADD TICKET BOX -->
    <div class="modal fade" id="addTicket">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add Ticket</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="form-group">
                            <div class="col-xs-3">
                                <p><input type="text" class="form-control" placeholder="Bet"></p>
                            </div>
                            <div class="col-xs-3">
                                <p><input type="text" class="form-control" placeholder="Gain"></p>
                            </div>
                            <div class="col-xs-3">
                                <p><input type="text" class="form-control" placeholder="Odds"></p>
                            </div>
                            <div class="col-xs-3">
                                <p><input type="date" class="form-control" placeholder="Date"></p>
                            </div>
                        </div>

                        <div class="row-fluid" style="left: 0px;">
                            <div class="row-fluid">
                                <div class="col-xs-6">
                                        <p><input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false"></p>
                                        <p><input class="form-control" id="match" type="text" placeholder="MATCH"></p>
                                        <p><input class="form-control" id="match" type="text" placeholder="MATCH"></p>
                                        <p><input class="form-control" id="match" type="text" placeholder="MATCH"></p>
                                        <p><input class="form-control" id="match" type="text" placeholder="MATCH"></p>
                                        <p><input class="form-control" id="match" type="text" placeholder="MATCH"></p>
                                        <p><input class="form-control" id="match" type="text" placeholder="MATCH"></p>
                                        <p><input class="form-control" id="match" type="text" placeholder="MATCH"></p>
                                    <p><a onclick="matches_row()">Add more matches...</a></p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-6" style="width: 120px;">
                                    <div class="tipslist">
                                        <p><input class="form-control" id="t1" type="text" placeholder="TIP"></p>
                                        <p><input class="form-control" id="t2" type="text" placeholder="TIP"></p>
                                        <p><input class="form-control" id="t3" type="text" placeholder="TIP"></p>
                                        <p><input class="form-control" id="t4" type="text" placeholder="TIP"></p>
                                        <p><input class="form-control" id="t5" type="text" placeholder="TIP"></p>
                                        <p><input class="form-control" id="t6" type="text" placeholder="TIP"></p>
                                        <p><input class="form-control" id="t7" type="text" placeholder="TIP"></p>
                                        <p><input class="form-control" id="t8" type="text" placeholder="TIP"></p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-block" data-dismiss="modal">Add Ticket</button>
                </div>
            </div>
        </div>
    </div>

Above is the bootstrap modal box which contains 16inputs (8 matches, 8 tips) so i want in the matches when i will start typing to appear autocomplete... btw this is IN my navigation.php script. Im following this link: tutorialrepublic

bootstrap javascript php

Edited 8 Years Ago by Stefce

3 Contributors
9 Replies
733 Views
3 Months Discussion Span
Latest Post 7 Years Ago Latest Post by rproffitt

All 9 Replies

pritaeas 2,194 ¯\_(ツ)_/¯

8 Years Ago

Did you include the typeahead.js script in your page?

pritaeas 2,194 ¯\_(ツ)_/¯

8 Years Ago

STOP bumping your threads. Show some patience.

I tried the example, it doesn't work and I don't have time to figure out what it is. I suggest you find another example to work with.

rproffitt 2,580 "Nothing to see here."

7 Years Ago

You may want to start again and build on a working example like http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=typeahead-with-local-dataset

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Stefce 146 Posting Pro · Answer 1 · 2016-01-18T13:46:35+00:00

Stefce 146 Posting Pro

8 Years Ago

Anyone ?

Stefce 146 Posting Pro · Answer 2 · 2016-01-18T17:46:49+00:00

Yes its included

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script  type="text/javascript" src="../js/typeahead.min.js"></script>

The path to files is C:\xampp\htdocs\bootstrap\js\typeahead.min.js

Stefce 146 Posting Pro · Answer 3 · 2016-01-18T18:04:22+00:00

BTW i created new file and pasted the same code from the website and again doesn't work...

asd.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Typeahead</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script  type="text/javascript" src="js/typeahead.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input.typeahead').typeahead({
        name: 'accounts',
        local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']
    });
});  
</script>
<style type="text/css">
.bs-example{
    font-family: sans-serif;
    position: relative;
    margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
    border: 2px solid #CCCCCC;
    border-radius: 8px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: 396px;
}
.typeahead {
    background-color: #FFFFFF;
}
.typeahead:focus {
    border: 2px solid #0097CF;
}
.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;
}
.tt-suggestion {
    font-size: 24px;
    line-height: 24px;
    padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}
</style>
</head>
<body>
    <div class="bs-example">
        <h2>Type your favorite car name</h2>
        <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
    </div>
</body>
</html>

Stefce 146 Posting Pro · Answer 4 · 2016-01-19T19:22:03+00:00

Stefce 146 Posting Pro

8 Years Ago

I must ask this, but someone ?

Stefce 146 Posting Pro · Answer 5 · 2016-01-20T14:25:59+00:00

but actualy none of them works, i tried with queryUI too but again no results

Stefce 146 Posting Pro · Answer 6 · 2016-05-01T16:18:20+00:00

Stefce 146 Posting Pro

7 Years Ago

Someone ?

bootstrap autocomplete

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers