Bootstrap Tag AutoComplete with Ajax Support

Question

I am using this plugin in my site : http://sandglaz.github.io/bootstrap-tagautocomplete/

It's default options are :

$(document).ready(function(){
      $('div#autotag').tagautocomplete({
        source: ['@ann', '@andrea', '@aaron', '@daryl', '@emma', '@faris', '@june', '@jane', '@jessica', '@john', '@myra', '@maria', '@mariam', '@mention', '@mona', '@omar', '@peter', '@quinn', '@rana', '@sam', '@simon', '@tom', '@upton', '@veronica', '@wayne', '@yasmin', '@zaid', '#work', '#product', '#marketing', '#customer'],
        character: '@#'  
      });
      $('div#autotag').first().focus();
    });

<div id="example" contenteditable="true"></div>

But i want the source with "Ajax" Option, something like this :-

jQuery(document).ready(function() {
  jQuery('div#poststatus').tagautocomplete({
    source: 'http://laravel.local/list',
    character: '@#'
  });
});

<div id="example" contenteditable="true"></div>

And In list, Resources are :-

['@ann', '@andrea', '@aaron', '@daryl', '@emma', '@faris', '@june', '@jane', '@jessica', '@john', '@myra', '@maria', '@mariam', '@mention', '@mona', '@omar', '@peter', '@quinn', '@rana', '@sam', '@simon', '@tom', '@upton', '@veronica', '@wayne', '@yasmin', '@zaid', '#work', '#product', '#marketing', '#customer']

But this is not working. Is it possible to make it ajaxified ?

i have textarea, where user will be typing more text & can have multiple tags too... something like twitter tweet box.

Thanks

Answer 1

Have you included this all files

          <script src="jquery.js"></script>
          <script src="deps/bootstrap-typeahead.js></script>
          <script src="deps/rangy-core.js></script>
          <script src="deps/caret-position.js></script>
          <script src="bootstrap-tagautocomplete.js"></script>

In that case you want to add some text and also tag someone then ideal plugin to use is

Mention Input js

Try it

Answer 2

please check this link

please check this link

http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js

<h5>Old way with just an array of strings:</h5>
<input type="text" class="test-attr-input" placeholder="Type 'A'" autocomplete=off>
<label class="test-attr-val"></label><br/>


$('.test-attr-input').typeahead({
    source: [
      'Alaska',
      'Alabama',
      'Illinois'
    ]

    // there would be no need to change this function; it is overridden just to show the value difference from the other typeahead
  , updater: function (item) {
      $('.test-attr-val').text('Value: '+item);
      return item
    }
});

$('.test-data-input').typeahead({
    source: [{
      display: 'Alaska',
      val: 'AK'
    },{
      display: 'Alabama',
      val: 'AL'
    },{
      display: 'Illinois',
      val: 'IL'
    }]

  , updater: function (item) {
      $('.test-data-val').text('Value: '+item.val);
      return item.display
    }

  , highlighter: function(item) {
      var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
      return item.display.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
        return '<strong>' + match + '</strong>'
      })
    }

  , matcher: function(item) {
      return ~item.display.toLowerCase().indexOf(this.query.toLowerCase())
    }

  , sorter: function(items) {
      return items   
    }
});

Answer 3

Just pass a function to the source list and return the required items from it.

e.g.

jQuery(document).ready(function() {
  jQuery('div#poststatus').tagautocomplete({
    source: function() { /* fetch and return data */ },
    character: '@#'
  });
});