首页 > 代码库 > solr进阶七：与jQuery结合的自动补全功能
solr进阶七：与jQuery结合的自动补全功能
网上有大量的jQuery自动补全功能的插件，我实现这个功能是采用网友写好的纯jQuery代码，而不是采用插件，因为特效会差很多。而后台的数据是从solr那边获取过来，通过整理，放到对象中，再放到集合中，然后在servlet层解开，生成xml文件，返回到前台，形成自动提示补全的功能，流程非常简单，没有采用框架技术，只是用了JSP的servlet来做中间层而已。
目录结构如下：
1.先编写实体类src\com\lifeix\entity\Word.java
package com.lifeix.entity;
/**
* Created by lhx on 14-12-9 上午9:38
*
* @project jspProject
* @package com.lifeix.entity
* @blog http://blog.csdn.net/u011439289
* @email 888xin@sina.com
* @Description
*/
public class Word {
//次数
private int number ;
//名称
private String name ;
public Word(){}
public Word(int number, String name){
this.number = number ;
this.name = name ;
}
public int getNumber() {
return number;
}
public void setNumber(int number) {
this.number = number;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
2.编写一个servlet测试一下src\com\lifeix\servlet\AutoCompleteServlet.java
package com.lifeix.servlet;
import com.lifeix.entity.Word;
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;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
/**
* Created by lhx on 14-12-9 上午9:31
*
* @project jspProject
* @package ${PACKAGE_NAME}
* @blog http://blog.csdn.net/u011439289
* @email 888xin@sina.com
* @Description
*/
public class AutoCompleteServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
StringBuffer sf = new StringBuffer("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
sf.append("<message>");
List<Word> list = new ArrayList<Word>(10);
Word word = null ;
for (int i = 0; i < 10; i++) {
word = new Word(i, "abd" + i);
list.add(word);
}
Iterator<Word> it = list.iterator();
while (it.hasNext()){
Word word1 = it.next();
if (word1 == null){
continue;
}
int number = word1.getNumber();
String name = word1.getName();
sf.append("<word>"+name);
sf.append("</word>");
}
sf.append("</message>");
PrintWriter pw = null;
try {
response.setContentType("text/xml;charset=utf-8");
response.setCharacterEncoding("UTF-8");
response.setHeader("Cache-Control", "no-cache");
pw = response.getWriter();
pw.print(sf.toString());
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);
}
}启动tomcat，访问这个servlet，结果如下：
证明返回的确实是XML文档。
3.直接编写页面文档jspProject\web\auto2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 自动完成功能(优化版)</title>
<script type="text/javascript" src=http://www.mamicode.com/"js/jquery-2.1.1.js"></script>>这个例子引用：施杨de编程世界www.cnblogs.com/shiyangxt
4.重启tomcat，打开这个页面，访问：
不管是首字母还是中间的，都会有提示了！
这个demo没有和solr结合，现在我们加入solr，直接从solr里面取数据！
访问solr管理页面，选择要搜索的core和字段，还有值，看看有没有搜索结果出来。后期会加入可以动态编辑的字段还有值，使例子更实用些。
1.编写后台类，与solr交互，获取数据src\com\lifeix\util\SolrGetFtTopic.java
package com.lifeix.util;
import com.lifeix.entity.Word;
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.List;
/**
* Created by lhx on 14-12-9 上午10:30
*
* @project jspProject
* @package com.lifeix.util
* @blog http://blog.csdn.net/u011439289
* @email 888xin@sina.com
* @Description
*/
public class SolrGetFtTopic {
private static final String SOLR_URL = "http://192.168.199.22:8080/xxx/";
public List<Word> queryAll(){
ModifiableSolrParams params = new ModifiableSolrParams();
params.set("q","topicName:次");
params.set("start",0);
params.set("rows",Integer.MAX_VALUE);
params.set("sort","score desc");
params.set("f1","*,score");
SolrServer server = new HttpSolrServer(SOLR_URL);
List<Word> listWord = new ArrayList<Word>() ;
Word word = null ;
try {
QueryResponse response = server.query(params);
SolrDocumentList list = response.getResults();
for (int i = 0; i < list.size(); i++) {
word = new Word();
SolrDocument document = list.get(i);
word.setName( (String)document.getFieldValue("topicName") );
listWord.add(word);
}
return listWord ;
} catch (SolrServerException e) {
e.printStackTrace();
}
return null ;
}
}
2.修改src\com\lifeix\servlet\AutoCompleteServlet.java，主要就是把静态数据换成了从solr后台获取的list集合数据
package com.lifeix.servlet;
import com.lifeix.entity.Word;
import com.lifeix.util.SolrGetFtTopic;
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;
import java.util.Iterator;
import java.util.List;
/**
* Created by lhx on 14-12-9 上午9:31
*
* @project jspProject
* @package ${PACKAGE_NAME}
* @blog http://blog.csdn.net/u011439289
* @email 888xin@sina.com
* @Description
*/
public class AutoCompleteServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
StringBuffer sf = new StringBuffer("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
sf.append("<message>");
SolrGetFtTopic solrGetFtTopic = new SolrGetFtTopic();
List<Word> list = solrGetFtTopic.queryAll();
Iterator<Word> it = list.iterator();
while (it.hasNext()){
Word word1 = it.next();
if (word1 == null){
continue;
}
String name = word1.getName();
sf.append("<word>"+name);
sf.append("</word>");
}
sf.append("</message>");
PrintWriter pw = null;
try {
response.setContentType("text/xml;charset=utf-8");
response.setCharacterEncoding("UTF-8");
response.setHeader("Cache-Control", "no-cache");
pw = response.getWriter();
pw.print(sf.toString());
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);
}
}
3.前台页面的jQuery代码可以纹丝不动，重启tomcat，先访问servlet，看看数据能不能正常获取：
没问题！！访问页面，也一样没问题！
solr进阶七：与jQuery结合的自动补全功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。