一、<datalist>标签的作用
- <datalist> 标签规定了<input> 元素可能的选项列表。
- <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值。
- 绑定的<input>标签必须设置list 属性，属性值等于<datalist>标签的id 属性值。
二、<datalist>标签演示案例
1.<datalist>标签未绑定效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>datalist标签--泽哥ins</title>
</head>
<body><form action=""><input type="text"></form><datalist><option value="北京市">bj</option><option value="广州市">gz</option><option value="深圳市">sz</option></datalist>
</body>
</html>
从如上图运行效果我们看到，我们在<datalist>标签中书写了<option>选项，但是并没有和<input>进行关联起来，还是普通的<input>。
2.<datalist>标签绑定后的效果（1）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>datalist标签--泽哥ins</title>
</head>
<body><form action=""><input type="text" list="city-list"></form><datalist id="city-list"><option value="北京市">bj</option><option value="广州市">gz</option><option value="深圳市">sz</option></datalist>
</body>
</html>
如上图演示，我们看到通过<datalist>标签的id属性和<input>标签的list属性进行绑定，二者就关联起来啦。
3.<datalist>标签绑定后的效果（2）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>datalist标签--泽哥ins</title>
</head>
<body><form action=""><input type="text" list="city-list"></form><datalist id="city-list"><option value="北京市"><option value="广州市"><option value="深圳市"></datalist>
</body>
</html>
如上图演示我们看到，<datalist>标签中的<option>标签支持但标签书写，展示的效果如上图所示。
