Autocomplete-Select（自动填充）

效果图：

 

Autocomplete官网：

https://api.jqueryui.com/autocomplete/#event-select

 

Autocomplete基本使用方式：

https://blog.csdn.net/W_Meng_H/article/details/89399270

 

Select（自动填充）：

$("#chineseName").autocomplete({
	source: function(request, response){
		var url = "URL" + request.term;
		$.ajax({
			type: "GET", 
			url: url,
			contentType: 'application/x-www-form-urlencoded;charset=utf-8',
			dataType: 'json',
			success: function(data){
				response(data.ChineseNamelist);
                                //后端数据存在前端隐藏域
				$("#NameMaps").val(data.NameMap);
			}
		});
	},
	select: function (event, ui) {
            $(this).value = ui.item.label;
            $("#chineseName").val(ui.item.value);
            var chinesename = ui.item.value;
            var NameMap = $("#NameMaps").val();
            var nameMap = JSON.parse(NameMap);
            var nameMapJson = nameMap;
            //解析json
            for (var i = 0; i < nameMapJson.length; i++) {
		for(var key in nameMapJson[i]){
			if (key == chinesename) {
				var thisName = $.trim(nameMapJson[i][key]);
				$("#scientificName").val(thisName);
			} 
		}
	    }
            event.preventDefault();
        }
});