jquery.bootcomplete.js

Lightweight AJAX autocomplete alternitive for Bootstrap 3

Download bootcomplete.js

Fork me on GitHub
Need a AJAX modal set for Bootstrap? Checkout jquery.bootpop.js

An easy to use Bootstrap autocomplete alternative to Typeahead/Bloodhound.
Below are a couple examples of usage.


Initialize

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootcomplete.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.bootcomplete.js"></script>
                

Basic Example

<input id="example1" type="text" name="country" placeholder="Enter a Country" class="form-control">
                
<script type="text/javascript">
    $('#example1').bootcomplete({
        url:'ajax/countries.php'
    });
</script>
                

Chained Example


<select name="group" id="chainops" class="form-control">
    <option value="colors">Colors (red, green, blue)</option>
    <option value="fruits">Fruits (apple, orange, pear)</option>
</select>
                
<input id="example2" type="text" name="chained" placeholder="Enter Query" class="form-control">
                
<script type="text/javascript">
    $('#example2').bootcomplete({
        url:'ajax/chained.php',
        minLength : 1,
        formParams: {
            'group' : $('#chainops')
        }
    });
</script>
                

Options

Download on GitHub



comments powered by Disqus