solr进阶七：与jQuery结合的自动补全功能

作者：夏乐迎1 | 来源：互联网 | 2023-10-10 18:01

网上有大量的jQuery自动补全功能的插件，我实现这个功能是采用网友写好的纯jQuery代码，而不是采用插件，因为特效会差很多。而后台的数据是从solr那边获取过来，通过整理，放到对象中，再放到

网上有大量的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("");
        sf.append("");

        List list = new ArrayList(10);
        Word word = null ;
        for (int i = 0; i <10; i++) {
            word = new Word(i, "abd" + i);
            list.add(word);
        }

        Iterator it = list.iterator();
        while (it.hasNext()){
            Word word1 = it.next();
            if (word1 == null){
                continue;
            }
            int number = word1.getNumber();
            String name = word1.getName();
            sf.append(""+name);
            sf.append("");
        }
        sf.append("");
        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



    
    
    





    仿google自动补全(jQuery优化版)

这个例子引用：施杨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 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 listWord = new ArrayList() ;
        Word word = null ;

        try {
            QueryResponse respOnse= server.query(params);
            SolrDocumentList list = response.getResults();
            for (int i = 0; i  
  
 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("");
        sf.append("");
        SolrGetFtTopic solrGetFtTopic = new SolrGetFtTopic();
        List list = solrGetFtTopic.queryAll();
        Iterator it = list.iterator();
        while (it.hasNext()){
            Word word1 = it.next();
            if (word1 == null){
                continue;
            }
            String name = word1.getName();
            sf.append(""+name);
            sf.append("");
        }
        sf.append("");
        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，看看数据能不能正常获取： 
  
  
 没问题！！访问页面，也一样没问题！