Prepend Items to Bootstrap Typeahead

This is a little code snippet for manually adding static items along with typeahead suggestions list. This can be used to prepend or append items. I'm using biggora/bootstrap-ajax-typeahead

You only need to look for render event of the plugin and inject your code.

[sourcecode language="javascript"]
$("#customer").typeahead({
        onSelect: function(item) {
            ...
        },
        updater: function(item) {
            return item;
        },
        highlighter: function(name) {
           ...
        },
        ajax: {
            ...
            },
           
        render: function(items) {
            var uber = {render: $.fn.typeahead.Constructor.prototype.render};
            uber.render.call(this, items);
            this.$menu.prepend('<li class="nostyle"><a href="#" autocomplete="off" data-toggle="modal" data-target="#itemModal"><i class="fa fa-plus"></i> New Customer</a></li>');
            return this;
        }
    });
[/sourcecode]

 

Bootstrap3 Ajax Typeahead Templating

Plugin URL : https://github.com/biggora/bootstrap-ajax-typeahead


[sourcecode language="javascript"]
<script type="text/javascript">
    var items;
$("#search_item").typeahead({
    onSelect: function(item) {
        add_order_item(item.value);
    },
      updater: function (item) {
        return item;
    },
    highlighter: function(name){
         var item = _.find(items, function (c) {
                        return c.name == name;
                    });
           
        var itm = ''
                 + "<div class='typeahead_wrapper'>"
                 + "<div class='typeahead_labels'>"
                 + "<div class='typeahead_primary'><span class='pname'>" + item.name + "</span></div>"
                 + "<div class='typeahead_secondary'><span class='pprice'>Rs. "+ item.purchase_price +"</span><div>"
                 + "<div class='typeahead_secondary'>Code: "+ item.code +" / SKU: " + item.sku + "</div>"
                 + "</div>"
                 + "</div>";
                    return itm;
    },
            
    ajax: {
        url: "<?php echo base_url('items/suggest_json');?>",
        timeout: 500,
        item: '<li><a href="#"></a><p>fgfg</p></li>' ,
        scrollBar: true,
        valueField: "id",
        displayField: "name",
        triggerLength: 1,
        method: "get",
        loadingClass: "loading-circle",
        preDispatch: function (query) {
            //showLoadingMask(true);
            return {
                search: query
            }
        },
        preProcess: function (data) {
            //showLoadingMask(false);
            if (data.success === false) {
                // Hide the list, there was some error
                return false;
            }
            // We good!
            items = data.results;
            return data.results;
        }         
    }
});

function add_order_item(item_id){
alert(item_id);
</script>
[/sourcecode]