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">×</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
