JavaScript 关于 @ 自动补全回复人姓名这一功能

jyootai · 2014年05月22日 · 最后由 autocomplete 回复于 2017年03月18日 · 3871 次阅读

最近想要实现使用 @ 自动补全回复人姓名这一功能,于是使用了@ichord 同学的 jquery-atwho-rails 这个 gem. 首先就在 Gemfile 中添加了gem "jquery-atwho-rails",'~> 0.4.9' 然后在 application.js 中添加 //= require jquery.atwho 为了先测试就先按文档上的添加:

data = ['tom','join'];
 $('textarea').atwho({at:"@", 'data':data});

文档上面说的不是很详细,这样添加后依然未能实现想要的功能,不知道还有什么地方需要操作?

这个到没用过,不过我看 readme 上的 css 你加了么?

#1 楼 @sunday35034 这个跟 css 没关系,css 只是对已经呈现出现的样式作修改

#2 楼 @jyootai 也对,坐等楼下回答

是不是没引入 jquery?

#4 楼 @Seabornlee

//= require jquery
     ……
//= require jquery.atwho
//= require_self

data = ['tom','join'];
$('textarea').atwho({at:"@", 'data':data});

浏览器控制台有没有什么错误信息呢?

看样子你应该没导入 jquery.caret ,atwho 依赖那个的

#6 楼 @Seabornlee #7 楼 @teddy_1004 看了哈,确实有错: 但看了 jquery-atwho-rails 的源代码, jquery.caret 被包含在里面阿。……迷惑了……

@jyootai 我没有用那个 gem,之前用的时候也是有点问题,倒可以显示,但是样式总是不对。后来就把他们自己的 js/css 文件下来导入进来用就一切正常了。

#9 楼 @teddy_1004 这样的话岂不是很臃肿?

#10 楼 @jyootai 为什么臃肿?用 gem 不就是比自己导入方便了一点吗,最后该压缩整合在一起还是会做的。我看 Ruby China 是把 atwho 和 caret 这两个 js 文件和在一起放在 assets 里面,然后在 application.js 里面引入它。

https://github.com/ichord/At.js 我也是自己手动引入的,有时候这样引入 js 我还放心一点。 at.js 是依赖 caret.js https://github.com/ichord/Caret.js

#11 楼 @teddy_1004 Ruby China 只引入了一个吧 https://github.com/ruby-china/ruby-china/tree/78fc2ed2a37e3e92e825a6a45bca9003e1a091f4/app/assets/javascripts 我把 jquery.caret.js 放在了 javascripts 文件下,最后在 application.js 中引入,可是还是报上面的错,难道是有 jquery.caret.map这个文件 ?

@jyootai 那是以前的版本, 以前是合并到一个文件的. 后来被我分开了..

#14 楼 @ichord 本尊终于出现了 😄 请问这个问题怎么解决呀?

@jyootai 其实去 github 提问题好一些. 不过这里有人帮忙解答也挺好, 😄

那个 jquery.caret.map 应该是你在开发环境设置了 coffee mappnig 吧? 所以会去找 *.map . 这个没关系的. *.js 都引入就好了.

我刚试了下, 引入是没问题的, 但是有 bugs... 试试新的, v0.4.11

#9 楼 @teddy_1004 同学, 有问题请到 github 报 issue 啊.

#15 楼 @jyootai 另外, 使用这个 gem 引入方式跟以前是一样的,

//= require jquery.atwho

虽然 gem 里也是分开了两个文件的, 但是依赖的 caret.js 都会被自动引入的.

#13 楼 @jyootai Ruby-China 里把 At.js 和 Caret.js 一起放在 jquery.atwho.js 这个文件里面了

#17 楼 @ichord 因为当时不确定是不是自己的问题,后来自己导入之后解决了,所以就把这事儿给忘啦。这两天在研究 Caret.js 的源码,学到不少东西啊!

#17 楼 @ichord Gemfile 中: gem 'jquery-atwho-rails', '~> 0.4.11' application.js 中 :

//= require jquery
//= require jquery.atwho

data = ['tom','join'];
$('textarea').atwho({at:"@", 'data':data});

现在的 jsvascripts 文件夹下仅有 jquery.atwho.js这个文件(因为你说 caret.js 会被自动引入),重启,依然还是不行...

#19 楼 @jyootai

你有在 $(function(){ //... }) 里调用吗?...

#20 楼 @ichord 因为现在还不懂 js,所用遇到很多麻烦。于是跟着文档走,可是文档提供的信息不是很全,于是实现起来…… 😞

#21 楼 @jyootai 哈哈... 我以为在 $(function(){ //... }) 里执行 jquery 代码是常识. 觉得文档不好欢迎提 PR. 或者在 github 上写篇 wiki.

#22 楼 @ichord 我想问现在这个需要加点什么料,怎么解决呀?

#23 楼 @jyootai = =. 也许你要 google 一下怎么使用 jquery 插件, 或者说学习一下 jquery 的 .ready 方法

//= require jquery
//= require jquery.atwho

$(function() {
  $('#inputor').atwho({
    at: "@",
    data: ["one", "two", "three"]
  });
});

#24 楼 @ichord 还是不行,将#inputor换成textarea也不行。看来只有学了 js 才能添加这功能了。。

实现一个智能提示功能需要 ajax、数据库、jsp/php、算法等很多知识, 如果数据量大,还需要特殊优化 一个小功能,花费太大精力很不划算 92find.com 上的一个 js 插件实现了搜索框自动补全托管服务, 只要一行 javascript 代码就可以实现百度、淘宝搜索框提示的全部功能 比如:汉字拼音匹配、拼音前缀匹配、模糊搜索、智能容错,还可以自定义提示词汇及其排序权重 花五分钟我的网站就可以部署同百度、淘宝一样强大好用的输入提示功能 同时兼容 IE、Firefox、Safari、Chrome、Opera 各种浏览器 兼容 ios、Android、Windows

需要 登录 后方可回复, 如果你还没有账号请 注册新账号