-1

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

Edited by Stefan_1

3
Contributors
9
Replies
29
Views
1 Year
Discussion Span
Last Post by rproffitt
0

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>                                      
1

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.