solr进阶八:jQuery UI Autocomplete与solr搜索结合
大致的流程:
页面捕获到文字 --> 传到servlet(Controller)层,servlet层调用后台 --> 后台根据servlet层传来的参数进行动态从solr中获取数据 --> solr 数据返回到servlet层,解析 --> 展现到页面上。
在solr里面新建一个core,在MySQL数据库里面新建一个表,从这个表导入数据到solr的core中,具体步骤可以上网查或者看我前面的教程。
SQL语句:
SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for lifeixroles -- ---------------------------- DROP TABLE IF EXISTS `lifeixroles`; CREATE TABLE `lifeixroles` ( `id` int(11) NOT NULL AUTO_INCREMENT, `accountId` int(11) DEFAULT NULL, `level` int(11) DEFAULT NULL, `name` varchar(255) DEFAULT NULL, `accountName` varchar(255) DEFAULT NULL, `namePinyin` varchar(255) DEFAULT NULL, `l99NO` int(11) DEFAULT NULL, `photoPath` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8; -- ---------------------------- -- Records of lifeixroles -- ---------------------------- INSERT INTO `lifeixroles` VALUES ('1', '4', '38', '崭露头脚', 'peter', 'peter', '150104', '02/MjAwOTAzMjgyMTM1NTdfMjIwLjI0OS43OS4zNV8zMzM2MDI=.jpg'); INSERT INTO `lifeixroles` VALUES ('2', '8', '1', '小虾米', '立方咖啡', 'lifangkafei', '150108', '20/MjAwOTAyMTYwMzQxMjBfMjIwLjI0OS43OS4zNV82MDYwNTc=..JPG'); INSERT INTO `lifeixroles` VALUES ('3', '11', '46', '名动江湖', 'nick', 'nick', '150121', '10/MjAxNDA2MTMxMTQ2MDVfMTkyLjE2OC4xOTkuNTdfNTA0NDcy.jpg'); INSERT INTO `lifeixroles` VALUES ('4', '10', '1', '小虾米', 'oz', 'oz', '150130', '21/MjAxMjEyMjExNTA5MzlfMTgzLjM3LjM0LjI5XzIzMjA1Nw==.png'); INSERT INTO `lifeixroles` VALUES ('5', '49', '46', '李四', '立方方圆', 'li', '150163', '10/MjAwOTAyMDcxMjQwMzBfMjIwLjI0OS43OS4zNV83MjQ3ODI=..jpg');
schema.xml的部分配置参考:
分词器:
指定数据库配置文件:
由于新建core是拷贝solr-4.10.2\example\multicore这里面的core,所以配置文件非常简单。在自己的core里面看看分词器是否有用,结果显示是有用的:
可是到搜索里面搜索指定字段的部分词语时,搜索不出,只能搜索出全名的:
查找故障很久都找不出为什么,包括把multiValued改为true,虽然不知道具体原因,但是改了这个,但是没有用,显示出的结果带方括号而已。
后来把这些数据导入collection1就正常了,可能是一些关键的东西没有配置,因为原来core里面的配置是最简单的基础配置,这有待于后面的仔细研究学习。搜索出关键词的数据:
这样就好办了,开始编码!
后台还是servlet和json的jar包生成json数据返回到前台页面,具体步骤可以看我前面的总结教程。
对象转换成json语句的工具类:src\com\lifeix\util\FastJsonUtil.java
package com.lifeix.util; import com.alibaba.fastjson.JSON; /** * Created by lhx on 14-12-10 下午4:15 * * @project jspProject * @package com.lifeix.util * @blog http://blog.csdn.net/u011439289 * @email [email protected] * @Description */ public class FastJsonUtil { /** * Object实体转换为json * @param object * @return */ public static String object2json(Object object){ JSON json = (JSON) JSON.toJSON(object); return json.toJSONString(); } }
后台从solr服务器上获取数据的处理类:\src\com\lifeix\util\SolrGetFtTopic2.java
package com.lifeix.util; import org.apache.solr.client.solrj.SolrServer; import org.apache.solr.client.solrj.SolrServerException; import org.apache.solr.client.solrj.impl.HttpSolrServer; import org.apache.solr.client.solrj.response.QueryResponse; import org.apache.solr.common.SolrDocument; import org.apache.solr.common.SolrDocumentList; import org.apache.solr.common.params.ModifiableSolrParams; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; /** * Created by lhx on 14-12-9 上午10:30 * * @project jspProject * @package com.lifeix.util * @blog http://blog.csdn.net/u011439289 * @email [email protected] * @Description */ public class SolrGetFtTopic2 { private static final String SOLR_URL = "http://localhost:8080/solr/collection1"; public String queryAll(String htmlWord){ ModifiableSolrParams params = new ModifiableSolrParams(); params.set("q","accountName:"+htmlWord); params.set("start",0); params.set("rows",10); params.set("sort","score desc"); params.set("f1","*,score"); SolrServer server = new HttpSolrServer(SOLR_URL); List<Map<String,Object>> listWord = new ArrayList<Map<String, Object>>(); Map<String,Object> map = null ; try { QueryResponse response = server.query(params); SolrDocumentList list = response.getResults(); for (int i = 0; i < list.size(); i++) { map = new HashMap<String, Object>(); SolrDocument document = list.get(i); map.put("label",document.getFieldValue("l99NO") ); map.put("value", document.getFieldValue("accountName")); listWord.add(map); } return FastJsonUtil.object2json(listWord) ; } catch (SolrServerException e) { e.printStackTrace(); } return null ; } }
Servlet层从前台页面获取输入值,再交给后台处理
\src\com\lifeix\servlet\JsonSolrServlet.java
package com.lifeix.servlet; import com.lifeix.util.SolrGetFtTopic2; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; /** * Created by lhx on 14-12-10 下午5:29 * * @project jspProject * @package ${PACKAGE_NAME} * @blog http://blog.csdn.net/u011439289 * @email [email protected] * @Description */ public class JsonSolrServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取网页上文本框输入的内容 String htmlWord = request.getParameter("term").trim(); String jsonStr = "" ; SolrGetFtTopic2 solrGetFtTopic = new SolrGetFtTopic2(); if (!"".equals(htmlWord) && htmlWord != null){ //传入参数,根据参数来进行搜索 jsonStr = solrGetFtTopic.queryAll(htmlWord); } PrintWriter pw = null; try { response.setContentType("application/json; charset=utf-8"); response.setCharacterEncoding("UTF-8"); response.setHeader("Cache-Control", "no-cache"); pw = response.getWriter(); pw.print(jsonStr); pw.flush(); }catch (Exception e) { e.printStackTrace(); } finally { if (pw != null) pw.close(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request,response); } }
现在是前台页面的jQuery UI Autocomplete代码,这些代码可以参考
jQuery UI Autocomplete官网的远端缓存处理例子:
http://jqueryui.com/autocomplete/#remote-with-cache
jQuery UI Autocomplete是jQuery UI的自动完成组件
我的代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Fancy Validate - jQuery UI Autocomplete</title> <link href="jquery-ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" /> <script src="js/jquery-1.7.1.min.js"></script> <script src="jquery-ui/js/jquery-ui-1.8.17.custom.min.js"></script> <script src="jquery-ui/js/jquery-ui-widget-combobox.js"></script> <style> body { font-size: 14px; } fieldset { width: 650px; margin: 0 auto; text-align: right; } fieldset div { margin: 15px auto; } .cbo .ui-button-text { line-height: 1.3; padding-top: 0; padding-bottom: 0; } .cbo .ui-autocomplete-input { width: 7.2em; } </style> <script> $(function() { var cache = {}; $("#username").autocomplete({ minLength: 2, source:function(request, response){ var term = request.term; if(term in cache){ response(cache[term]); return ; } $.getJSON('jsonsolr',request,function(data,status,xhr){ cache[term] = data ; response(data); }); } }); var cache1 = {}; $("#username1").autocomplete({ minLength: 2, source:function(request, response){ var term = request.term; if(term in cache1){ response(cache1[term]); return ; } $.getJSON('jsonsolr2',request,function(data,status,xhr){ cache1[term] = data ; response(data); }); } }); var cache2 = {}; $("#l99NO").autocomplete({ minLength: 6, source:function(request, response){ var term = request.term; if(term in cache2){ response(cache2[term]); return ; } $.getJSON('jsonsolrl99',request,function(data,status,xhr){ cache2[term] = data ; response(data); }); } }); // 自定义source函数 var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "火星.com", "囧月.com"]; $("#email1").autocomplete({ autoFocus: true, source: function(request, response) { var term = request.term, //request.term为输入的字符串 ix = term.indexOf("@"), name = term, // 用户名 host = "", // 域名 result = []; // 结果 result.push(term); // result.push({ label: term, value: term }); // json格式 if (ix > -1) { name = term.slice(0, ix); host = term.slice(ix + 1); } if (name) { var findedHosts = (host ? $.grep(hosts, function(value) { return value.indexOf(host) > -1; }) : hosts), findedResults = $.map(findedHosts, function(value) { return name + "@" + value; //返回字符串格式 // return { label: name + " @ " + value, value: name + "@" + value }; // json格式 }); result = result.concat($.makeArray(findedResults)); } response(result); //呈现结果 } }); /* combobox autocomplete */ $("#combo1").combobox(); }); </script> </head> <body> <form action="?" id="fancyform"> <fieldset> <legend>jQuery UI Autocomplete</legend> <div> 根据用户名搜索(输词语,如:立方,提示龙号):<input id="username" type="text" /> </div> <div> 根据用户名搜索(输词语,如:立方,提示用户名):<input id="username1" type="text" /> </div> <div> 根据龙号来搜索(输全部,如:150108):<input id="l99NO" type="text" /> </div> <div> Email(随便输):<input id="email1" type="text" /> </div> <div class="cbo"> Combobox(选择):<select id="combo1"> <option value="">请选择</option> <option value="1">地球</option> <option value="2">月球</option> <option value="3">火星</option> </select> </div> </fieldset> </form> </body> </html>
最后的实现效果如下:
——————————————————————————
——————————————————————————————————————————
后记:
因为前面改过multiValued的值,改为true了,所以搜索返回的值是带方括号的,导致生成的json语句不是正规的json,所以前台页面解析不了,通过断点调试可以发现这个问题:
另外这个例子还有一个缺点,就是中文输入的话,输入词语不能马上触发事件,要接着敲键盘或者敲一个空格键,jQuery才会把文本中的文字送到后台处理,而英文和数字没有这个问题,这个还要处理!
资料下载:http://pan.baidu.com/s/1jG1gAHK
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。