实用文本框输入字符后下拉菜单内容自动匹配效果

最新推荐文章于 2024-08-24 20:20:19 发布

衿世伿僞妳

最新推荐文章于 2024-08-24 20:20:19 发布

阅读量897

点赞数

分类专栏： c#

本文链接：https://blog.youkuaiyun.com/u011955559/article/details/34841893

版权

这是一个关于如何实现文本框输入字符后自动匹配下拉菜单内容的示例。通过JavaScript代码，当用户在文本框中输入内容时，系统会根据输入自动显示出匹配的选项列表。用户可以通过上下键选择列表中的内容，或者直接输入完成匹配。该示例包括了CSS样式、HTML结构以及JavaScript函数，展示了动态数据匹配和用户交互的基本功能。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<title> 实用文本框输入字符后下拉菜单内容自动匹配效果</title>
<style type="text/css">
html{overflow:-moz-scrollbars-vertical;}
body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;}
body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;}
button,input,select,textarea {font:12px/1.5 tahoma,arial,simsun,sans-serif;}
button,input,select,textarea{font-size:100%;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
#wwwzzjsnet{width:650px;margin:0 auto;}
.txt{width:210px;height:25px;border:1px solid #ccc;line-height:25px;padding:0 5px;}
.autoDis{border:1px solid #999;position:absolute;overflow:hidden;}
.autoDis p{line-height:25px;cursor:default;padding:0 5px;}
.autoDis li{line-height:25px;cursor:default;padding:0 5px;background-color:#fff;}
.autoDis .cur{background:#ccc;}
</style>
</head>
<body>

<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>
<div id="wwwzzjsnet">
	<p>提示：可以输入内容可以提示</p>
	<input id="auto_wwwzzjsnet" type="text" class="txt">
	<!--<input id="auto_zzjs_net" type="text" class="txt">-->
</div>
<script type="text/javascript">
(autoComplete={
    pop_len:10,
    pop_cn:'autoDis',
    hover_cn:'cur',
    source:'13612345564|13825646464|13412236054|13012348564|13012345564|13012365564|彭小|王达|李相公|李四|

最低0.47元/天解锁文章