Question

我尝试使用this中的Mention.js。

我的Search.html包含，

<!DOCTYPE html>
<html>
<body>
<div> 
<textarea id="try"></textarea>
</div>

<script type="text/javascript" src="http://jakiestfu.github.io/Mention.js/javascripts/bootstrap-typeahead.js">

  $('#try').mention({
  delimiter: '@',
  users: [{
      username: "ashley"
  }, { 
      username: "roger"
  }, { 
      username: "frecklefart123"
  }]
});

</script>
</body>
</html>

该框不返回任何结果。任何指出我的错误的帮助表示赞赏。感谢。

P.S这是伪代码，实际使用情况在search.html.erb的rails应用程序中，它具有Typeahead依赖性。

Answer 1

作为Mention.js的文档

<强>依赖关系

jQuery ，的事先键入的内容

所以你应该使用

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript" src="http://jakiestfu.github.io/Mention.js/javascripts/bootstrap-typeahead.js"></script>

然后是插件

<script type="text/javascript">(function(e){e.fn.extend({mention:function(t){this.opts={users:[],delimiter:"@",sensitive:true,queryBy:["name","username"],typeaheadOpts:{}};var n=e.extend({},this.opts,t),r=function(){if(typeof e=="undefined"){throw new Error("jQuery is Required")}else{if(typeof e.fn.typeahead=="undefined"){throw new Error("Typeahead is Required")}}return true},i=function(e,t){var r;for(r=t;r>=0;r--){if(e[r]==n.delimiter){break}}return e.substring(r,t)},s=function(e){var t;for(t in n.queryBy){if(e[n.queryBy[t]]){var r=e[n.queryBy[t]].toLowerCase(),i=this.query.toLowerCase().match(new RegExp(n.delimiter+"\\w+","g")),s;if(!!i){for(s=0;s<i.length;s++){var o=i[s].substring(1).toLowerCase(),u=new RegExp(n.delimiter+r,"g"),a=this.query.toLowerCase().match(u);if(r.indexOf(o)!=-1&&a===null){return true}}}}}},o=function(e){var t=this.query,r=this.$element[0].selectionStart,i;for(i=r;i>=0;i--){if(t[i]==n.delimiter){break}}var s=t.substring(i,r),o=t.substring(0,i),u=t.substring(r),t=o+n.delimiter+e+u;this.tempQuery=t;return t},u=function(e){if(e.length&&n.sensitive){var t=i(this.query,this.$element[0].selectionStart).substring(1),r,s=e.length,o={highest:[],high:[],med:[],low:[]},u=[];if(t.length==1){for(r=0;r<s;r++){var a=e[r];if(a.username[0]==t){o.highest.push(a)}else if(a.username[0].toLowerCase()==t.toLowerCase()){o.high.push(a)}else if(a.username.indexOf(t)!=-1){o.med.push(a)}else{o.low.push(a)}}for(r in o){var f;for(f in o[r]){u.push(o[r][f])}}return u}}return e},a=function(t){var r=this;t=e(t).map(function(t,i){t=e(r.options.item).attr("data-value",i.username);var s=e("<div />");if(i.image){s.append('<img class="mention_image" src="'+i.image+'">')}if(i.name){s.append('<b class="mention_name">'+i.name+"</b>")}if(i.username){s.append('<span class="mention_username"> '+n.delimiter+i.username+"</span>")}t.find("a").html(r.highlighter(s.html()));return t[0]});t.first().addClass("active");this.$menu.html(t);return this};e.fn.typeahead.Constructor.prototype.render=a;return this.each(function(){var t=e(this);if(r()){t.typeahead(e.extend({source:n.users,matcher:s,updater:o,sorter:u},n.typeaheadOpts))}})}})})(jQuery)</script>

或者只需下载Mention.js文件并将其链接到您的代码

然后

<script> // run your code here </script>

Answer 2

$('#try').mention({...)};它应该在$( document ).ready()。

@ Mention.js不返回任何结果

2 个答案: