类似百度搜索框实时搜索的实现

1、html代码

<input type="text" name="ProjectNumber" id="ProjectNumber" /><div class="contain__border__search" id="ProjectNumberSearch"></div>

2、css样式

.contain__border__search {display: none;position: relative;z-index: 9;max-height: 200px;overflow: auto;border: 1px solid #ccc;background: #fff;width: 60%;margin-left: 35%;margin-top: -1px;border-top: none;box-shadow: 0 0 1px #ccc;
}
.contain__border__search p {font-size: 14px;height: 20px;line-height: 20px;
}
.contain__border__search p:hover {background: rgba(245, 239, 242, 1);
}

3、js实现

// 项目编号加keyup事件$("#ProjectNumber").keyup(function () {$("#ProjectNumberSearch").html("");   // 初始搜索框为空var code = $("#ProjectNumber").val();    // 获取输入框中的值if (code == "") {                      // 如果为空，隐藏搜索框$("#ProjectNumberSearch").css("display", "none");return;} else {for (var i = 0; i < systemCode.length; i++) {   // systemCode为待匹配的所有值for (var j = 0; j < systemCode[i].length; j++) {var pat = new RegExp(code, "i");if (pat.test(systemCode[i][j])) {     // 如果匹配到，显示搜索框和内容$("#ProjectNumberSearch").css("display", "block");$("#ProjectNumberSearch").append("<p onclick='writeSystemCode(this)' ontouchstart='codeStart(this)' ontouchend()='codeEnd(this)' >" + systemCode[i][j] + "</p>");}}}}if ($("#ProjectNumberSearch").html() == "") {    // 如果搜索框为空，隐藏$("#ProjectNumberSearch").css("display", "none");}});// 当点击的时候，将内容写入表单，隐藏框
function writeSystemCode(p)
{$("#ProjectNumber").val(p.innerHTML);$("#ProjectNumberSearch").css("display", "none");$("#ProjectNumberSearch").html("");
}
// 开始触碰事件
function codeStart(p)
{$(p).css("background", "rgba(245, 239, 242, 1)");
}
// 触碰结束事件
function codeEnd(p) {$(p).css("background", "#fff");
}

类似百度搜索框实时搜索的实现相关推荐

React hooks + antd前台实现input搜索框实时搜索table表格
阅读本文前提需掌握react hooks 中useState和useEffect基本用法! ?.详见"可选链"语法糖文章目录实现效果实现步骤 1.引入 2.初始化 3.筛选数 ...
Win10左下角搜索框无法搜索点击无反应的解决方法
为了更便捷,在Win10系统经常会使用到桌面左下角的搜索框进行搜索程序,但是近期Win10搜索框搜不到任何东西,点开就是白框一片空白,不知道如何解决!那么Win10搜索框用不了? 具体解决方法: 1. ...
windows10搜索框不能搜索解决方法
原文出处:https://blog.csdn.net/qq_40875146/article/details/81742533 解决Windows10搜索框不能搜索问题. 1.首先,打开管理员命令窗口 ...
解决win10搜索框无法搜索本地应用或无反应
解决win10状态栏的搜索框无法搜索本地应用或无反应今天突然出现的问题,在状态栏左下角的搜索框搜索cmd,本来要以管理员运行,结果没有任何反应. 解决办法: 1.首先,打开管理员命令窗口,输入sta ...
Win10左下角搜索框无法搜索无反应的解决方案
为了更便捷,在Win10系统经常会使用到桌面左下角的搜索框进行搜索程序,但是近期Win10搜索框搜不到任何东西,点开就是白框一片空白,不知道如何解决!那么Win10搜索框用不了?下面装机之家分享一下W ...
Win10任务栏搜索框无法搜索,显示白色页面
Win10任务栏搜索框无法搜索,显示白色页面如果确定: Windows search服务启动打开 %LocalAppData%\Packages\windows.immersivecontrolp ...
js实现搜索框智能搜索提示，类似百度搜索
List item 一.概要场景:用户可能记不得是哪个搜索词了,但是结果表单是唯一的,不可能实现模糊搜索. 解决方案:搜索框实现智能搜索提示.在用户搜索键入关键字的过程中,不断去请求后台,将查询结果 ...
javascript搜索框联想搜索_jQuery搜索框效果实现代码(百度关键词联想)
可以实现关键词联想的,搜索框:集合了百度,谷歌,搜狗,360,腾讯等多家搜索 search.html的代码: 搜索框例子 *{margin:0 auto} 站内搜索百度搜索 360搜索腾讯搜索搜 ...
iOS 自定义搜索框实时监听输入的内容变化
产品需求:点击搜索框,弹出键盘,当输入内容发生变化时,需要实时匹配与输入内容相关的产品,列表展示,让用户去选择:类似于淘宝和京东的搜索功能. 拿到需求的时候觉得这个应该挺简单的啊,苹果这么强大,这些功 ...

类似百度搜索框实时搜索的实现

类似百度搜索框实时搜索的实现相关推荐

最新文章

热门文章