利用JavaScript构建一个模仿百度输入框自动匹配的功能。
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本文提供了一个实例，详细阐述了如何使用JavaScript构建一个模仿百度输入框自动匹配功能的代码。目前，许多网站都采用了类似的效果，即当用户在文本框中输入一个字符时，下方会立即显示与之相关的匹配内容。该代码演示了实现这一功能的具体流程。此外，值得注意的是，该实现方式是静态的；若需要更动态的效果，可以考虑从数据库中读取提示信息，并借助AJAX技术进行交互。希望此代码能够为您的参考提供帮助，以下是具体的实现细节：<HTML><HEAD><title>带输入匹配的文本框</title><style>body,div {font-family:verdana;line-height:100%;font-size:10pt;}input {width:320px;}h1 {text-align:center;}</style</HEAD><BODY><H1>带输入匹配的文本框</H1><INPUT TYPE=TEXT ID=txtSearch oninput=search() /><UL ID=listSearch></UL></BODY><SCRIPT>function search() {var strBox = document.getElementById(txtSearch).value;var arr = new Array();if (strBox != ) {strBox = strBox.toLowerCase();arr = getMatch(strBox);document.getElementById(listSearch).innerHTML = ;for (var i = 0; i < arr.length; i++) {var listItem = document.createElement(LI);listItem.innerHTML = arr[i];document.getElementById(listSearch).appendChild(listItem);} } else {document.getElementById(listSearch).innerHTML = ;} function getMatch(str) {var arrReturn = new Array();if (str == apple) {arrReturn[0] = 苹果;arrReturn[1] = Apple; } else if (str == banana) {arrReturn[0] = 香蕉;arrReturn[1] = Banana; } else if (str == orange) {arrReturn[0] = 橙子;arrReturn[1] = Orange; } else{arrReturn[0] = 没有匹配结果;} return arrReturn;} </SCRIPT></SCRIPT>
全部评论 (0)
