java 如何自动维护序号

首先要做自动补齐需要一个插件
Bootstrap-3-Typeahead-master
需要的：可以点击下面的百度云链接下载：

链接: https://pan.baidu.com/s/1Huk-8cIuW3G3itJCSr3PSQ 提取码: 82wd

首先是为什么需要这个插件呢？因为有了这个插件我们就能更方便的做自动补齐，
好了废话不多说，直接进入正题

首先让我们先看看自动补齐的效果

可以看到的是，这边根据输入的内容自动弹出了相似的内容出来，而这个就是自动补齐

具体的原理是这样的：

既然原理已经明白了，那么我们就直接进入代码阶段吧

首先我们先从前端入手

<input class="form-control" style="width: 130px;" 
     						      type="text" name="keyword"
                                 id="targetInput"/>
     <input class="form-control"  name="id" id="hiddenInput"/>

然后写JS代码

//首先如果要使用需要先导入对应的插件
<script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap3-typeahead.min.js"></script>

<script>
	$(function (){
		//首先要绑定对应的typeahead函数
		$("#targetInput").typeahead({
			minLength:5,	
			items:5,
			source:function(query,process){
					//首先我们先打印一下试试
					console.log(query);
			}
		})
	})

</script>

这里我们在id=targetInput的输入框输入字符数超过5位的信息，可以看到控制台上打印出了相应的信息(此处略)

• 说明了query指的是输入框中的关键字信息

至于process指的是什么，稍后再讲

因为query是输入框的值，那么我们就可以利用它发起异步请求

<script>
	$(function (){
		//首先要绑定对应的typeahead函数
		$("#targetInput").typeahead({
			minLength:5,	
			items:5,
			source:function(query,process){
				$.ajax({
					dataType:"json",
					type:"POST",
					url:"/autoComplete"
					data:{keywords:query},
					success:function(data){
						
						console.log(data);

					}

				})
			}
		})
	})

</script>

由于前台需要数据，此时我们编写后台，说明一下，这里需要查询的是username+id ，所以需要一个包含Map的List集合

@Controller
public class AutoCompleteController{
	
	//这里采用的是我自己的service
	@Autowired
	private IUserService userService;
	
	@PostMapping("autoComplete")
	@ResponseBody
	public List<Map<String,Object>> autoComlete(String keyword){
			userService.autoComplete(keyword);
	}
}

<!-- 对应的SQL -->
<select id = "autoComplete" resultType="java.util.Map">
	select id,username from user 
	where username like concat('%',#{keyword},'%');
</select>

可以看到我们输入关键字后得到了下面的数据

此时我们需要的下一步动作就是将数据显示到下拉列表中去

此时之前没说的process就派上用场了！

<script>
	$(function (){
		//首先要绑定对应的typeahead函数
		$("#targetInput").typeahead({
			source:function(query,process){
				$.ajax({
					dataType:"json",
					type:"POST",
					url:"/autoComplete"
					data:{keywords:query},
					success:function(data){
						
						process(data);
					},
					minLength:5,	
					items:5,
					displayText:function(item){
						return item.username;
					}
				})
			}
		})
	})

</script>

• 这里的process的作用就是拿到数据，然后给displayText去展示

最后我们之前说过我们从后端拿到的数据是username + id 的，那么id怎么用呢?

其实在很多时候，我们的业务通常需要获取username 和 id，比如搜索某人然后发送邮件

并且后台还需要做相关记录，此时id就十分必要了

在展示username的同时设置对应组件的id

<script>
	$(function (){
		//首先要绑定对应的typeahead函数
		$("#targetInput").typeahead({
			source:function(query,process){
				$.ajax({
					dataType:"json",
					type:"POST",
					url:"/autoComplete"
					data:{keywords:query},
					success:function(data){
						
						process(data);
					},
					minLength:5,	
					items:5,
					displayText:function(item){
						return item.username;
					}
				})
			}
		}).change(function(){
			//拿到当前选中元素，其实就是拿到当前typeahead的item
			var current = $(this).typeahead("getActive");
			//设置隐藏域的值
			$("#hiddenInput").val("id",current.id);
		})
	})

</script>

至此，typeahead的简单实用就介绍完毕了