Skip to content Skip to sidebar Skip to footer
Home / Javascript / Typeahead.js

Bootstrap Typeahead.js

Post a Comment
I have been trying to get the bootstrap typeahead to work, with no luck whatsoever. I have pasted the code I have. I have reference Jquery-1.9.1 and typeahead.js. What am I doing w

Solution 1:

It looks like you're getting confused between typeahead.js (by Twitter) and Twitter Bootstrap's Typeahead feature

You're including the library for typeahead.js

<script src="Scripts/typeahead.js-master/src/typeahead.js"></script>

but trying to use it like Twitter Bootstrap's typeahead feature.

Make sure you're including the Twitter Bootstrap library, if you want to use your current code:

<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Here's an example: jsFiddle

Solution 2:

I hope this is what you expection. Here is the complete code try with necessary dependencies.

<!DOCTYPE html><html><head><title>Member</title><metaname="viewport"content="width=device-width, initial-scale=1.0"><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/bootstrap.min.js"></script><linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen"></head><body><divclass="well"><inputtype="text"class="span3"id="search"data-provide="typeahead"data-items="4" /></div><script>var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];   
$('#search').typeahead({source: subjects})  
</script></body></html>

Solution 3:

The Type head File with add two features:

  1. Type Space Bar Show All Auto Complete Data's
  2. If you Give Data with Space also Can be Sort and Display Data's

Change The Lookup Function This:

 lookup: function (event) {         
    var that = this,
        items;        
    if (that.ajax) {
        that.ajaxer();
    }    
    elseif (($.trim(that.$element.val())) == "") {
        that.query = that.$element.val();
        if (!that.query) {
            return that.shown ? that.hide() : that;
        }        
        items = that.source;        
        if (!items || !items.length) {
            return that.shown ? that.hide() : that;
        }
        return that.render(items.slice(0, that.options.items)).show();
    }
    else {
        that.query = $.trim(that.$element.val());
        if (!that.query) {
            return that.shown ? that.hide() : that;
        }        
        items = that.grepper(that.source);
        if (!items || !items.length) {
            return that.shown ? that.hide() : that;
        }
        return that.render(items.slice(0, that.options.items)).show();
    }
},

Post a Comment for "Bootstrap Typeahead.js"