input 输入框自动联想功能

最新推荐文章于 2023-01-30 14:11:13 发布

qq_34626712

最新推荐文章于 2023-01-30 14:11:13 发布

阅读量1.5w

点赞数 2

分类专栏： mybatis 文章标签： mybatis 输入框联想

本文链接：https://blog.csdn.net/qq_34626712/article/details/70176967

版权

mybatis 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上面的是效果图，通过输入的值在数据库中进行查询进而进行联想使用

重点注意 1 jsp中引用的文件要全版本不能太老 2界面的字符编码方式utf-8 否者有可能出现中文联想不对的

前端jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var search = $("#search");
			
			var source = new Array();//[{"name":"zhangkun"},{"name":"dashen"}]//["aab","aac","bbd","bbn"];
			
			search.autocomplete({
				source:source,
				    messages: {  //message设置不出现匹配关键字的结果
        				noResults: '',
        				results: function() {}
    				}
			});
			
			search.keyup(function(){
				$.ajax({
					type:"POST",
					url:"/springmvc_mybatis/user/search.action",
					data:{search:$("#search").val()},
					success:function(data){
						var obj = eval(data); //将json转换为对象的方法
						for(var i = 0; i < obj.length; i++){
							source[i] = obj[i].username;
						}
					}
				});
			});
		});
	</script>
  </head>
 <body>
 	<label for="acount">自动联想输入</label>
 	<input type="text" id = "search" autocomplete="off">
 </body>
  
</html>

sql语句 mybatis

 <select id="selectByLike" parameterType="java.lang.String" resultType="cn.itcast.ssm.po.User">
  		select * from user where username like concat("%",#{key},"%")
  </select>

后端支持代码springmvc 做的返回对象的json字串使用mybatis

/**
 * @author zhangkun
 */
@Controller
@RequestMapping("/user")
public class UsersCotroller {
	@Autowired
	private UserService userService;
	@RequestMapping("/search")
	/**
	 * @param search ajax提交上来的输入框的值
	 * @return  返回装有user对象的list的json字串
	 */
	public @ResponseBody List<User> search(String search){  //
		System.out.println(search);
		return    userService.searchByLike(search); 
	}
}

qq_34626712

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
input 输入框自动联想功能

上面的是效果图，通过输入的值在数据库中进行查询进而进行联想使用重点注意 1 jsp中引用的文件要全版本不能太老 2界面的字符编码方式utf-8 否者有可能出现中文联想不对的前端jsp代码<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+reque
复制链接

扫一扫