复利计算器（4）——jQuery界面美化、自动补全

一、分工

这次终于可以跟小伙伴合作了，经过讨论，我负责界面的美化和输入框自动补全，小伙伴擅长安卓，于是将复利计算器弄成app的任务就交给了小伙伴。为了我们两人团队，我们都好奋斗哈哈哈！！

二、界面美化

1.弹框提示

• 思路：弹框提示显示是浏览器自带，所以难免会难看些（如图一），因此引进一些jQuery的插件，将弹框美化（如图二）

  

  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图一

  

  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图二

  
  
• 实现：从网上下载相应的插件的jar包，将jar包引用到相应的项目中，只要在项目中写就可以实现layer.alert("请在复利金额输入框输入正数（保留两位小数）！", {icon: 100});就可以实现

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.整体界面

• 思路：将整个页面（如图三）给了小伙伴觉得怪，想将两个面板合并成一个面板，但是个人有个人的想法，我觉得将其设计成两个面板的也是可以的

• 实现：只是将原来的背景改的不那么花俏

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

三.输入框自动补全

• 思路：百度了一下，发现有jQuery补全的插件，一整晚都在想如何用插件来实现自动补全，可是百度了一些，完全不懂，离11点还有两个小时，我决定用异步请求来实现，可是还是有一点小BUG

• 实现：通过ajax异步请求，用QL语句进行like查询，把数据库中带有输入框输入的内容提示出来，下面是与数据库连接的代码实现

  public List<showDataModel> searchByLike(String keyValue,String num)
  	{
  		String a = null;
  		if(num.equals("1"))
  			a="f_1";
  		if(num.equals("2"))
  			a="f_2";
  		if(num.equals("3"))
  			a="f_3";
  		if(num.equals("4"))
  			a="f_4";
  		Session session = getSession();
  		String sql="select * form t_showdata where "+a+" like %"+keyValue+"%";
  		SQLQuery query= session.createSQLQuery(sql);
  		List<showDataModel> list = query.list();
  		session.getTransaction().commit();
  		session.close();
  		return list;
  		
  	}