ssm前后端分离之搜索框的自动提示功能

一，使用的技术

 easyUI,mybatis,

二，服务端

  1,实体类

package com.meng.entity;

import java.util.List;

public class DataResult<T> {
	
	public DataResult() {}
public DataResult(int total, List<T> rows) {
 
		this.total = total;
		this.rows = rows;
	}
private int total;
private List<T> rows;
public int getTotal() {
	return total;
}
public void setTotal(int total) {
	this.total = total;
}
public List<T> getRows() {
	return rows;
}
public void setRows(List<T> rows) {
	this.rows = rows;
}
}

package com.meng.entity;

import org.springframework.web.multipart.MultipartFile;

public class FlowersInfo {
	//鲜花编号
    private Integer flowerId;
    //鲜花名
    private String flowerName;
    //存储量
    private Integer flowerNum;
    //鲜花类型
    private Integer flowerType;
    //价格
    private Long price;
    //用户Id
    private Integer userId;
    //状态
    private Boolean status;
    //描述
    private String des;
    
    //关联查询出用户信息
    private UserInfo userInfo;
    //查询鲜花类型信息
    private FlowersTypeInfo flowersTypeInfo;
    
    
    public FlowersTypeInfo getFlowersTypeInfo() {
		return flowersTypeInfo;
	}

	public void setFlowersTypeInfo(FlowersTypeInfo flowersTypeInfo) {
		this.flowersTypeInfo = flowersTypeInfo;
	}

	public UserInfo getUserInfo() {
		return userInfo;
	}

	public void setUserInfo(UserInfo userInfo) {
		this.userInfo = userInfo;
	}

	//图片上传实体
    private MultipartFile  flowerImage;
    
    

    public MultipartFile getFlowerImage() {
		return flowerImage;
	}

	public void setFlowerImage(MultipartFile flowerImage) {
		this.flowerImage = flowerImage;
	}

	public Integer getFlowerId() {
        return flowerId;
    }

    public void setFlowerId(Integer flowerId) {
        this.flowerId = flowerId;
    }

    public String getFlowerName() {
        return flowerName;
    }

    public void setFlowerName(String flowerName) {
        this.flowerName = flowerName == null ? null : flowerName.trim();
    }

    public Integer getFlowerNum() {
        return flowerNum;
    }

    public void setFlowerNum(Integer flowerNum) {
        this.flowerNum = flowerNum;
    }

    public Integer getFlowerType() {
        return flowerType;
    }

    public void setFlowerType(Integer flowerType) {
        this.flowerType = flowerType;
    }

    public Long getPrice() {
        return price;
    }

    public void setPrice(Long price) {
        this.price = price;
    }

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public Boolean getStatus() {
        return status;
    }

    public void setStatus(Boolean status) {
        this.status = status;
    }

    public String getDes() {
        return des;
    }

    public void setDes(String des) {
        this.des = des == null ? null : des.trim();
    }

	@Override
	public String toString() {
		return "FlowersInfo [flowerId=" + flowerId + ", flowerName=" + flowerName + ", flowerNum=" + flowerNum
				+ ", flowerType=" + flowerType + ", price=" + price + ", userId=" + userId + ", status=" + status
				+ ", des=" + des + ", userInfo=" + userInfo + ", flowersTypeInfo=" + flowersTypeInfo + ", flowerImage="
				+ flowerImage + "]";
	}

	
    
    
}

 

2，controller

package com.meng.controller;

import java.io.File;
import java.io.IOException;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.meng.entity.DataResult;
import com.meng.entity.FlowersInfo;
import com.meng.service.FlowersInfoService;

@RestController
@RequestMapping("/flowers")
public class FlowerInfoController {

	@Autowired
	private FlowersInfoService flowersInfoService;

	// http://localhost:8080/flower/flowers/getAll
	@RequestMapping(value = "/getAll", method = RequestMethod.GET)
	public DataResult<FlowersInfo> get() {
		List<FlowersInfo> list = flowersInfoService.getAllFlowers();
		return new DataResult<FlowersInfo>(list.size(), list);
	}

	// http://localhost:8080/flower/flowers/getByName--搜索框
	@RequestMapping(value = "/getByName/{flowername}", method = RequestMethod.GET)
	public List<FlowersInfo> getByName(@PathVariable("flowername") String flowerName) {
		return flowersInfoService.getAllFlowersByName(flowerName);
	}

	// http://localhost:8080/flower/flowers/searchByName--查询按钮
	@RequestMapping(value = "/searchByName/{flowername}", method = RequestMethod.GET)
	public DataResult<FlowersInfo> searchByName(@PathVariable("flowername") String flowerName) {
		List<FlowersInfo> list = flowersInfoService.getAllFlowersByName(flowerName);
		return new DataResult<FlowersInfo>(list.size(), list);
	}

	// http://localhost:8080/flower/flowers/add
	@RequestMapping(value = "/add", method = RequestMethod.POST)
	public void add(FlowersInfo flower, HttpServletRequest request) {
		String fileName = flower.getFlowerImage().getOriginalFilename();
		String filePath = request.getServletContext().getRealPath("files");
		File file = new File(filePath, fileName);
		try {
			flower.getFlowerImage().transferTo(file);
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		flowersInfoService.addFlowers(flower);
	}

	// http://localhost:8080/flower/flower/update
	@RequestMapping(value = "/update", method = RequestMethod.PUT)
	public void update(FlowersInfo flower) {
		flowersInfoService.updateFlowers(flower);
	}

	// http://localhost:8080/flower/flowers/delete
	@RequestMapping(value = "/delete/{id}", method = RequestMethod.DELETE)
	public void delete(@PathVariable(value = "id") Integer flowerId) {
		flowersInfoService.deleteFlowers(flowerId);
	}
}

  3，数据库代码

<select id="selectByKeywords" parameterType="String" resultMap="BaseResultMap">
  	SELECT *
	FROM flowers
	where flower_name like CONCAT('%',#{flowerName},'%')
  </select>

三，客户端

//输入框的自动提示
	function setValue(obj) {
		$("#flowername").val(obj.innerHTML);
	}
	$(function(){
		
		
		//关键字查询
		$("#flowername").keyup(function() {

							if (this.value == "") {
								$("#divInfo").hide();
								return;
							}

							var url = "http://localhost:8080/flower/flowers/getByName/"+ this.value;
							
							$.getJSON(url,function(json) {
								
								var strHtml = "";
								$.each(json,function(i,item) {
									strHtml+="<div><a href='#' onclick=\"setValue(this);\">"+item.flowerName+"</a></div>";
									});
												$("#divInfo").html(strHtml);
												$("#divInfo").show();

											});
						});

	
	});

<body>

	<div id="p" class="easyui-panel" title="高级查询">
	
	<div style="float:left;">
	鲜花类型：
	</div>
	<div style="float:left;">
		<select>
			<option>类型1</option>
			<option>类型2</option>
		</select>
	</div>
	
		<div style="float:left;">
	 鲜花名称：
	</div>
		<div style="float:left;">
				<input type="text" id="flowername" /> 
		<input type="button"
			id="btnSearch" value="查询" />
		
		<div id="divInfo"   style="display: none; border:solid 1px;"></div>
		</div>
		
	</div>

	<table id="table">
	</table>




</body>