@

项目中使用input标签的时候可以动态加载内容

DOM

<input name="car_no" list="list">
<datalist id="list">
	<!-- <option></option> -->
</datalist>

id=“list” list可以为任意值,但是要和input中的list=”list”对应

jQuery动态获取

这里用的是jQuery的方法异步获取

// 获取输入框的值
let wd = $("input[name='']").val();
// 获取datalist组件
let dl = $('#list')
// 异步请求地址
let url = "/car/search/"+wd
//开始异步请求
$.get(url,(data)=>{
	// 判断返回数据状态码
	if(data.code===0){
		// 遍历数据集,$.each是jQuery中的遍历集合方法
		$.each(data.content,(index,item)={
			// 将数据添加到datalist标签中
			dl.append(`<option value='${item.id} ${item.name}'></option>`)
		}
	}
}

后台请求

@RestController
@RequestMapping("/car")
public class CarController {

    @GetMapping("/search/{wd}")
    public Object getUser(@PathVariable String wd) {
		// 模拟数据,没有下层调用
        CarPo[] list = new CarPo[]{
                new CarPo(1, "粤S2233A"),
                new CarPo(2, "粤SC89F2"),
                new CarPo(3, "粤SZ332F"),
                new CarPo(4, "粤SBL223"),
                new CarPo(5, "粤SQM389"),
                new CarPo(6, "粤SSB332")
        };
        List<CarPo> collect = Arrays.stream(list)
        		.filter(carPo -> carPo.getName()
        		.contains(wd.toUpperCase())) // 将关键字大写
                .collect(Collectors.toList());

        return new ResultJson(0, collect, "success");
    }
}

返回的数据格式

{
	"code":0,
	"content":[
		{"id":1,"name":"粤S2233A"},
		{"id":2,"name":"粤SC89F2"},
		{"id":3,"name":"粤SZ332F"},
		{"id":4,"name":"粤SBL223"},
		{"id":6,"name":"粤SSB332"}
	],
	"type":"success"
}

项目中使用了这技术,记录一下,加深自己的记忆