像 SoundCloud 上的自动标签自动填充？答案

【问题标题】：Automatic tag autofill like on SoundCloud?像 SoundCloud 上的自动标签自动填充？
【发布时间】：2015-03-04 23:34:13
【问题描述】：

我想在我的 Node.Js 应用程序中实现相同的自动标签识别系统：用户输入#word1 word2，这被识别为一个带有两个单词的标签，而不仅仅是一个标签。

我知道jquery.textcomplete 和jquery.taghandler，但它们只能做一个字长的标签。而且我需要一个能够识别短语标签的系统，比如在 SoundCloud 上：

你知道有什么图书馆可以帮助我做到这一点吗？

谢谢！

【问题讨论】：

标签： javascript autocomplete tags soundcloud jquery-autocomplete

【解决方案1】：

这可能是您的起点。它只使用 jQuery。

你需要添加自动完成、验证等。

按回车键添加标签。

HTML

<div class="form-group">
    <label for="exampleInputTags">Tags</label>
    <input class="form-control" id="exampleInputTags" placeholder="Enter tags">
</div>   
<div id="tags"></div>

var tag = '';
$("#exampleInputTags").keyup(function (e) {
    if (e.keyCode == 13) {
        tag = '#' + $("#exampleInputTags").val();
         $("#tags").append(tag + '<br/>');
        $("#exampleInputTags").val('');
    }
});

http://jsfiddle.net/iambnz/b7gju2c1/

编辑：

我为自动完成添加了一些逻辑。应该测试和更改正则表达式模式。到目前为止，不知道如何将其添加到输入上下文中。

var tag = '';
var str = 'JavaScript';

$("#exampleInputTags").keyup(function (e) {
    var re = $("#exampleInputTags").val();
    console.log(re);
    if (re != '')
    { 
    testinput(re, str);
    }
    else if (re == '')
    {
    $("#suggestions").text('');
    }
});

function testinput(re, str) {
  if (str.search(re) != -1) {
   $("#suggestions").text(str);
  } 
}

$("#exampleInputTags").keyup(function (e) {
    if (e.keyCode == 13) {
        tag = '#' + $("#exampleInputTags").val();
         $("#tags").append(tag + '<br/>');
        $("#exampleInputTags").val('');
    }
});

HTML

  <div class="form-group">
    <label for="exampleInputTags">Tags</label>
    <input class="form-control" id="exampleInputTags" placeholder="Enter tags">
  </div>      
  <div id="tags"></div>    
      <br/><br/>
   <div id="suggestions"></div>

http://jsfiddle.net/iambnz/yye1b4ye/

如果这一切都不能满足您的需求，请查看 bootstrap 中的 typeahead add on。

http://getbootstrap.com/2.3.2/javascript.html#typeahead

【讨论】：