html自带搜索的下拉框 datalist标签

最新推荐文章于 2025-04-16 20:28:57 发布

謦潇的小弟

最新推荐文章于 2025-04-16 20:28:57 发布

阅读量5.1k

点赞数 1

分类专栏：前端文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/m0_49191104/article/details/127564821

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML的datalist标签，用于创建带有搜索功能的下拉框，提高用户体验。通过示例和代码展示如何使用datalist，并与传统的select下拉框进行对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

背景

在下拉框选则使用时，选项较多比较难以查找

datalist标签

datalist作用

1.使得下拉框可以自带搜索（这极大的便捷了用户输入）
2.可以对值和选项进行搜索；（这也是过多的展示了多余的信息）

示例

在这里插入图片描述

代码

省份：<input type="text" list="text" />
			<datalist id="text">
				<option value="四川">sc</option>
				<option value="上海">sh</option>
				<option value="西藏">xz</option>
			</datalist>

注意：

在这里插入图片描述

select下拉框

示例

在这里插入图片描述

代码

<select name="paytypeid">
    <option value="-1">全部</option>
    <option value="1">学费</option>
     <option value="2">医疗</option>
     <option value="3">购买家电</option>
     <option value="4">份子钱</option>
     <option value="5">网络诈骗</option>
     <option value="6">打赏</option>
     <option value="7">购买种子</option>
     <option value="8">购买农药</option>
     <option value="9">购买兽药</option>
     <option value="10">在外聚餐</option>
</select>

整体代码

<!DOCTYPE html>
<html>
	<head>
		<title>支付列表</title>
		<script src="moz-extension://55ef304c-972b-41cb-a8bb-2dcb9d3e04ab/js/page.js"></script>
		<style>
			.youdao_tans_modal {
    display: none;
    position: fixed;
    background-color: #fff;
    max-width: 400px;
    max-height: 400px;
    overflow-y: auto;
    padding: 16px;
    border-radius: 2px;
    border: 1px solid #35a1d4;
    font-size: 12px;
    line-height: 1.6;
    color: #434343;
    box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
    z-index: 9999999999;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}

.youdao_tans_modal a{
    color: #35a1d4;
}

.youdao_tans_modal b{
    color: #638c0b;
}

.youdao_tans_modal p{
    margin: 0;
}

.youdao_tans_modal ul{
    list-style-type: none;
}

.youdao_tans_modal h1,h2,h3{
    font-size: 16px;
    margin-top: 16px;
}

.youdao_tans_modal a[href^='#'],a:not([href]),a[href='']{
    color: #434343;
}

.youdao_tans_modal .video,.more{
    display: none;
}

.youdao_tans_modal .title{
    font-weight: bold;
    font-size: 14px;
}
</style>
	</head>
	<body>

		<h1></h1>
		<form method="post" action="/peasant/pay/list">
			<input type="hidden" name="peasantid" value="1">
			支付名称:<input type="text" name="payname" value="">
			支付金额:<input type="text" name="payamount" value="">
			支付时间:<input type="date" name="paytime" value="" pattern="yyyy-mm-dd">
			支付类型:<select name="paytypeid">
				<option value="-1">全部</option>
				<option value="1">学费</option>
				<option value="2">医疗</option>
				<option value="3">购买家电</option>
				<option value="4">份子钱</option>
				<option value="5">网络诈骗</option>
				<option value="6">打赏</option>
				<option value="7">购买种子</option>
				<option value="8">购买农药</option>
				<option value="9">购买兽药</option>
				<option value="10">在外聚餐</option>
			</select>
			省份：<input type="text" list="text" />
			<datalist id="text">
				<option value="四川">sc</option>
				<option value="上海">sh</option>
				<option value="西藏">xz</option>
			</datalist>
			<input type="submit" value="搜索">
		</form>
		
	</body>
</html>