jquery - "[object Object]" showing in input field with bootstrap3-typeahead and tagsinput -

when tag selected, tag added correctly text [object object] appended in input box. (see below image)

i using bootstrap 3, jquery, bootstrap3-typeahead, , bootstrap-tagsinput (all recent versions)

the form in modal window.

here code:

jquery('#banner_geo_locations').tagsinput({     itemvalue: 'value',     itemtext: 'text',     typeahead: {         displaykey: 'text',         source: function (query) {             return jquery.get("http://dev.marijuanaweeklycoupons.com/?action=ajax|citystatessearchtags&pagespeed=off&q=" + query);         }     } }); 

ajax looks like:

[{"value":"2908762","text":"dixon corner, al"}, {"value":"2956030","text":"dixon corner, me"}, {"value":"3008251","text":"dixon corner, pa"}, {"value":"2931983","text":"dixon crossroads, ga"}, {"value":"3017149","text":"dixon crossroads, sc"}, {"value":"2959449","text":"dixon estates, md"}, {"value":"2959450","text":"dixon hill, md"}, {"value":"2993971","text":"dixon landing, nc"}, {"value":"2908763","text":"dixon shop, al"}, {"value":"2938722","text":"dixon springs, il"}] 

see in fiddle

it library issue.

adding below solves issue:

afterselect: function(val) { this.$element.val(""); }, 

as such,

jquery('#banner_geo_locations').tagsinput({     itemvalue: 'value',     itemtext: 'text',     typeahead: {         displaykey: 'text',         afterselect: function(val) { this.$element.val(""); },         source: function (query) {             return jquery.get(current_web_root + "?action=ajax|citystatesearchtags&pagespeed=off&q=" + query);         }     } }); 

see jsfiddle

https://jsfiddle.net/rgaxuyda/11/