在线聊天
在浏览网页的时候无意发现了弹幕这个玩意，于是我们简单去探究了一下弹幕其实是怎么产生的。
后来就接触到了“推送”这么一个概念，然后发现了goEasy这个服务商。
goEasy能够将我们的数据实时进行推送，使用起来也是很方便的。
使用了goEasy以后，我们就可以实现实时推送了。那么就剩下弹幕是怎么弄的了。后来又去找到了JS的组件：
http://yaseng.org/jquery.barrager.js/
这个组件可以帮我们很方便地生成弹幕…
<script type="text/javascript"> /*使用goEasy的推送功能*/ var goEasy = new GoEasy({ appkey: 'xxxxx' }); /*按回车的时候会推送*/ $("#inputText").keydown(function () { if (event.keyCode == 13) { goEasy.publish({ channel: 'demo_channel', message: $("#inputText").val() }); //推送完清空输入框 $("#inputText").val(""); } }); /*单击按钮的时候会推送*/ $("#btn").click(function () { goEasy.publish({ channel: 'demo_channel', message: $("#inputText").val() }); }); /*接收数据、数据形式是弹幕*/ goEasy.subscribe({ channel: 'demo_channel', onMessage: function (message) { var txt = message.content; var item = { img: '${request.contextPath}/imgs/favicon.ico', //图片 info: $("#userNickname").val() +"："+ txt, //文字 href: 'www.baidu.com', //链接 close: true, //显示关闭按钮 speed: 8, //延迟,单位秒,默认8 bottom: 500, //距离底部高度,单位px,默认随机 color: '#fff', //字体颜色颜色,默认白色 old_ie_color: '#fff' //ie低版兼容色,不能与网页背景相同,默认黑色 }; $('body').barrager(item); } }); </script>
实现效果：
该功能主要是使用到了两个组件，现在的功能实现非常简单，后面有需要再补充进去吧。
个人收藏夹
由于经常用到的网址越来越多，经常需要找好一阵子才能找到我想要去的网站。即使浏览器有收藏夹这么一个功能…
还是需要去找找找找的，因此我想自己建一个以关键搜索来跳转页面的功能。因为我的桌面版就是使用Rolan这么一个软件，输入关键字，就可以帮我打开软件了，很方便。
于是想起我学过Lucene这么一个全文搜索工具的，后来又发现了Elasticsearch是Lucene的子代，功能更强大也是一种比较新的技术了。后来我就去花了几天去学习Elasticsearch，找到了不少的资料。
学习Elasticsearch的过程已经在相关的博文中写过了，这里就不一一赘述了。
值得注意一点的是：当创建Elasticsearch的Client的时候，一定要加入嗅探这么一个配置：
.put("client.transport.sniff", true)
否则Elasticsearch在使用的时候会非常非常卡，简直令人怀疑人生。
自动补齐
经常上baidu、google的时候，当我们输入部分关键字的时候，那么会在下拉框中自动提示信息的。这个是怎么实现的呢？？？
Elasticsearch有suggest这么一个自动提示的功能，参考博文：
http://blog.csdn.net/gumpeng/article/details/50346631
http://www.tcao.net/article/86.html
http://blog.csdn.net/liyantianmin/article/details/60778273
具体的操作：
- 在建立Mapping的时候创建自动补齐的这么一个字段，设置以下的Mapping
//自动补全属性-------- .startObject("suggestName") .field("type", "completion") .field("analyzer", "standard") .field("payloads", "true") .endObject() //自动补全属性结束--------
当用户加入新的索引记录的时候，自动补齐字段就是我们的关键字段
public static String String2JSON(String... strings) throws IOException { String suggestName = strings[2]; if (suggestName.length() > 0) { } XContentBuilder builder = jsonBuilder() .startObject() .field("userId", strings[0]) .field("webSiteAddr", strings[1]) .field("webSiteName", strings[2]) //自动补全字段 .field("suggestName", strings[2]) .endObject(); return builder.string(); }
那么在查询的时候就非常好办了，首先查询Elasticserach所有的记录，再与提示字段来进行匹配，查询出来的数据就可以与关键字段相关了。
/** * 根据“命名”查询出数据（自动补全） * * @param client * @param indexName * @param condition 查询条件 */ public static List<String> queryIndexByConditionCompletion(TransportClient client, String indexName, String condition) { String field = "suggestName"; //先查询所有结果再与提示字段的数据进行匹配 SearchRequestBuilder req = client.prepareSearch(indexName); req.setQuery(QueryBuilders.matchAllQuery()); CompletionSuggestionBuilder csfb = new CompletionSuggestionBuilder(field).field(field).text(condition).size(100); req.addSuggestion(csfb); SearchResponse suggestResponse = req.execute().actionGet(); //遍历返回的结果、装载到集合中 List<String> lists = new ArrayList<String>(); List<? extends Suggest.Suggestion.Entry<? extends Suggest.Suggestion.Entry.Option>> results = suggestResponse.getSuggest().getSuggestion(field).getEntries(); for (Suggest.Suggestion.Entry<? extends Suggest.Suggestion.Entry.Option> op : results) { List<? extends Suggest.Suggestion.Entry.Option> options = op.getOptions(); for (Suggest.Suggestion.Entry.Option pp : options) { lists.add(pp.getText().toString()); } } return lists; }
对于下拉框提示的是通过JS+CSS来进行展示出来的，我是参考了一篇博文，对其进行修改的：
那篇博文现在找不着了…我就贴出我的代码吧：
<!--下拉框提示、请求后台--> <script type="text/javascript"> $(function () { //实现搜索输入框的输入提示js类 function oSearchSuggest(searchFuc) { var input = $('#condition'); var suggestWrap = $('#gov_search_suggest'); var key = ""; var init = function () { input.bind('keyup', sendKeyWord); input.bind('blur', function () { setTimeout(hideSuggest, 100); }) } var hideSuggest = function () { suggestWrap.hide(); } //发送请求，根据关键字到后台查询 var sendKeyWord = function (event) { //键盘选择下拉项 if (suggestWrap.css('display') == 'block' && event.keyCode == 38 || event.keyCode == 40) { var current = suggestWrap.find('li.hover'); if (event.keyCode == 38) { if (current.length > 0) { var prevLi = current.removeClass('hover').prev(); if (prevLi.length > 0) { prevLi.addClass('hover'); input.val(prevLi.html()); } } else { var last = suggestWrap.find('li:last'); last.addClass('hover'); input.val(last.html()); } } else if (event.keyCode == 40) { if (current.length > 0) { var nextLi = current.removeClass('hover').next(); if (nextLi.length > 0) { nextLi.addClass('hover'); input.val(nextLi.html()); } } else { var first = suggestWrap.find('li:first'); first.addClass('hover'); input.val(first.html()); } } //输入字符 } else { var valText = $.trim(input.val()); if (valText == '' || valText == key) { return; } searchFuc(valText); key = valText; } } //请求返回后，执行数据展示 this.dataDisplay = function (data) { if (data.length <= 0) { suggestWrap.hide(); return; } //往搜索框下拉建议显示栏中添加条目并显示 var li; var tmpFrag = document.createDocumentFragment(); suggestWrap.find('ul').html(''); for (var i = 0; i < data.length; i++) { li = document.createElement('LI'); li.innerHTML = data[i]; tmpFrag.appendChild(li); } suggestWrap.find('ul').append(tmpFrag); suggestWrap.show(); //为下拉选项绑定鼠标事件 suggestWrap.find('li').hover(function () { suggestWrap.find('li').removeClass('hover'); $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }).bind('click', function () { input.val(this.innerHTML); suggestWrap.hide(); }); } init(); } //实例化输入提示的JS,参数为进行查询操作时要调用的函数名 var searchSuggest = new oSearchSuggest(sendKeyWordToBack); //这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求 //参数为一个字符串，是搜索输入框中当前的内容 <!--搜索数据--> function sendKeyWordToBack(keyword) { var obj = { "condition": $("#condition").val() }; $.ajax({ type: "POST", url: path + "/favorites/querySiteCompletion.do", data: obj, dataType: "json", success: function (data) { console.log(data); var aData = []; for (var i = 0; i < data.length; i++) { //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回 if (data[i] != "") { aData.push(data[i]); } } //将返回的数据传递给实现搜索输入框的输入提示js类 searchSuggest.dataDisplay(aData); } }); } }); </script>
