Autocomplete-自动补全(Ajax)

效果图：

 

第一步： 添加脚本支持

<link rel="stylesheet" href="/plugins/Autocomplete/css/jquery-ui.min.css">
<script th:src="@{/plugins/Autocomplete/js/jquery.min.js}"></script>
<script th:src="@{/plugins/Autocomplete/js/jquery-ui.min.js}"></script>

下载链接： http://www.365mini.com/page/jquery-ui-autocomplete.htm

 

第二步： 添加html标签

<input type="text" class="form-control form-search" id="search" name="search"
aria-label="Text input with segmented dropdown button">

 

第三步： 初始化Autocomplete( )方法

$("#search").autocomplete({
		source: function(request, response){
			var url = '/search/rest/topSearch?name='+ request.term;
			
			$.ajax( {
				'url': url,
				dataType: 'json',
				success: function(dataObj){
					response(dataObj); 
				}
			} );		
		},
		
	});