原生js做模糊搜索

简介: 原生js做模糊搜索

html:

<input type="text" id="luo" oninput="fun()">
    <div id="sen"></div>

js:

let a = [1,2,3,45,6,7,89,09,7,6,5,98,567,8,76543];//数组
      let sen = document.getElementById('sen');//获取到标签
            //数据渲染
      function fu() {
        let str = '';
        for (let i = 0; i < a.length; i++) {
          str += '<p>' + a[i] + '</p>'
          sen.innerHTML = str;
        }
      }
            //具体的数据渲染,主要依靠indexof
      function fun() {
        let luo = document.getElementById('luo').value;
        let st = '';
        for (let m = 0; m < a.length; m++) {
          if (String(a[m]).indexOf(luo) > -1) {
            st += '<p>' + a[m] + '</p>'
          }
        }
        sen.innerHTML = st;
                //判断为空,调用函数
        if (luo == '') {
          fu()
        }
      }
相关文章
|
3天前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
10 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
1月前
|
JavaScript 数据安全/隐私保护 Python
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
36 4
|
1月前
|
JavaScript
js之模糊搜索
js之模糊搜索
|
1月前
|
JavaScript
js之模糊搜索
js之模糊搜索
|
27天前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
29 0
|
27天前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
21 0
|
1月前
|
JavaScript 前端开发 安全
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
29 0
|
1月前
|
JavaScript
js实现模糊搜索和排序
js实现模糊搜索和排序
10 0
|
2月前
|
数据采集 算法 JavaScript
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
JavaScript字符串搜索涵盖`indexOf`、`includes`及KMP算法。`indexOf`返回子字符串位置,`includes`检查是否包含子字符串。KMP是高效的搜索算法,尤其适合长模式匹配。示例展示了如何在数据采集(如网页爬虫)中使用这些方法,结合代理IP进行安全搜索。代码示例中,搜索百度新闻结果并检测是否含有特定字符串。学习这些技术能提升编程效率和性能。
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
|
1月前
|
JSON JavaScript 前端开发
使用js实现input框的模糊搜索
使用js实现input框的模糊搜索
25 0