java完成输入框的自动完成功能

最新推荐文章于 2022-08-17 15:47:28 发布

civilized

最新推荐文章于 2022-08-17 15:47:28 发布

阅读量5k

点赞数

文章标签： jquery jsuggest 自动补全

本文链接：https://blog.csdn.net/civilized/article/details/8562021

版权

在这个例子中，我所使用的是jsuggest插件

前期准备工作：下载好jsuggest这个自动补全插件，然后将jsuggest.css和jsuggest.js文件、ajax-loader.gif图片复制到相应的文件夹下，然后在相应的jsp页面导入这些文件

第一步：首先在jsp页面上，我们要将输入框通过jquery代码绑定到我们的自动补全插件上（即jsuggest插件上）

<link rel="stylesheet" type="text/css" href="/lbsp/LW/css/jsuggest.css">
<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/lbsp/LW/js/jSuggest.js"></script>

});

//这边我们也可以在jSuggest.js文件下的$.fn.jSuggest.defaults 这个里面进行设置

//这里面可以设置我们自动补全的设置
   $.fn.jSuggest.defaults = {
       //输入多少字符时会自动补全
       minchar: 1,
       //透明度
       opacity: 1.0,
       zindex: 20000,
       delay: 2500,
       //加载时的图片信息
       loadingImg: 'Images/ajax-loader.gif',
       //加载时的文本提示
       loadingText: 'Loading...',
       autoChange: false,
       url: "",
       type: "GET",
       data: ""
   };

到此，我们在jsp前端的部分就完成了

第二步：编写我们dao（数据库查询）类的编写

Public ArrayList<String> queryByAutoFind(String key){

//具体业务根据自己的需求写

//key为我们的绑定到插件data上时的project_key

//sql语句可以写成

key = “%” + key + “%”;

（ Select top 10 title from news where title like ？ order by newsid desc , key）

或者下面这样写也可：Select top 10 title from news where title like ‘%”+key+”%’ order by newsid desc

}

第三步：编写我们的处理页面autoFind.jsp页面，（注意:当然也可以是servlet页面）

首先我们要先判断是否在这个页面接收到传过来的data参数

String project_key = request.getParameter("project_key");

注意：如果这边我们没有写编码的过滤器的话，我们这边接收中文的时候可能会出现乱码：这时我们要这样处理：

String key =new String( request.getParameter(“key”).getBytes(“8859_1”),”utf-8”);

查询出数据后，我们就要对这些集合进行遍历，按照suggestion.html页面的格式进行拼接输出到展示页面的格式

（注意：这边由于我已经封装好dao类，所以省去这一步，将第二、第三步直接写在这一个页面）

代码如下：

<%
List list = null;
String sql = null;
StringBuffer sb = new StringBuffer("<ul>");    //拼接ul输出到展示页面的格式
JdbcTemplate jdbcTemplate =new JdbcTemplate("proxool");

//String key = request.getParameter("name_key");
// System.out.println("品牌的名字是:"+key);
if(request.getParameter("project_key") != null)
{
      String project_key = request.getParameter("project_key");
       //处理输入框的首尾空格
      int i = project_key.length();// 字符串最后一个字符的位置
      int j = 0;// 字符串第一个字符
      int k = 0;// 中间变量
      char[] arrayOfChar = project_key.toCharArray();// 将字符串转换成字符数组
      while ((j < i) && (arrayOfChar[(k + j)] <= ' '))   ++j;// 确定字符串前面的空格数
      while ((j < i) && (arrayOfChar[(k + i - 1)] <= ' '))   --i;// 确定字符串后面的空格数
      if ((j > 0) || (i < project_key.length())) {
          project_key=project_key.substring(j, i); // 返回去除空格后的字符串

   }
      try
       {
       jdbcTemplate.open();

       //加上count（*），group by product_project可以去除查询页面时相同的选项
       sql = "select product_project,count(*) as count from SQ_PRORES_PRODUCT t where product_project like '%"+project_key+"%'";
       String[] str = project_key.split("，|,|;|；|。|\\.| | |   |\\@|\\$|\\*|\\￥|\\-|\\+|\\\\|<|>");
       for(int a =0 ;a < str.length;a++)
       {
           project_key = str[a];
           sql += " or product_project like '%"+project_key+"%'";

       }
       String sqls= null;
       sqls = sql +"group by product_project";
       list = jdbcTemplate.queryForList(sqls);
          for(int a=0;a<list.size();a++)             //添加<ul><li>*****</li></ul>的输出格式
          {
              Map map = ( Map)list.get(a);
              sb.append("<li>"+map.get("product_project")+"</li>");
          }


          sb.append("</ul>");

       }
      catch (SQLException e) {
           jdbcTemplate.rollback();
           e.printStackTrace();
       } finally {
           jdbcTemplate.close();

       }
}
%>

<%= sb.toString()%>    //注意：此句的作用就相当于我们在servlet中out.println("***")这句的作用，就是将结果输出到jsp页面，不能漏掉