jquery - 支持 Ajax 的引导标记自动完成

Question

我在我的网站中使用这个插件：http: //sandglaz.github.io/bootstrap-tagautocomplete/

它的默认选项是：

$(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>

但我想要带有“Ajax”选项的源代码，如下所示：-

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

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

在列表中，资源是：-

['@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']

但这不起作用。是否有可能使其ajaxified？

我有 textarea，用户将在其中输入更多文本，并且也可以有多个标签……比如 twitter 推文框。

谢谢

Answer 1

您是否包含了所有文件

          <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>

在这种情况下，您想添加一些文本并标记某人，然后使用的理想插件是

提及输入js

试试看

Answer 2

只需将一个函数传递给源列表并从中返回所需的项目。

例如

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

Answer 3

请检查此链接

请检查此链接

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   
    }
});