简单的Autocomplete

最新推荐文章于 2025-08-22 11:32:18 发布

jj456852

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量406

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： autocomplete datagrid javascript function microsoft generator

本文链接：https://blog.youkuaiyun.com/jj456852/article/details/5409104

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的自动完成搜索建议功能。通过监听输入框的变化，并从已有的表格数据中筛选出匹配项来实时展示建议列表，极大地提升了用户体验。

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

因为所需要的数据已经保存在了一个table中，所以简化很多。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>WebForm1</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <mce:script language="javascript"></mce:script> </HEAD> <body> <form id="Form1" method="post" runat="server"> <FONT face="宋体"> <div id="textShow" style="Z-INDEX:100;POSITION:absolute" mce_style="Z-INDEX:100;POSITION:absolute"><INPUT id="Text2" onblur="javascript:changeEnd()" onfocus="javascript:changeBegin()" type="text"><INPUT type="button" value="Button"> <div id="tableShow" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; DISPLAY: none; Z-INDEX: 1000; BORDER-LEFT: black 1px solid; WIDTH: 100px; BORDER-BOTTOM: black 1px solid; POSITION: absolute; HEIGHT: 0px"> <TABLE id="uTable" cellSpacing="1" cellPadding="1" width="100%" border="0"> </TABLE> </div> </div> </FONT> <TABLE id="DataGrid1" style="DISPLAY:none" mce_style="DISPLAY:none" cellSpacing="1" cellPadding="1" width="300" border="1"> <TR> <TD>13428947548</TD> </TR> <TR> <TD>13456852348</TD> </TR> <TR> <TD>15485856845</TD> </TR> </TABLE> </form> </body> </HTML>

33 个 JavaScript 自动完成(Autocomplete)脚本

http://www.cftea.com/c/2009/10/5PH6PB1JUN58ZPS2.asp