现在在公司做的项目中存在一个页面不涉及后台数据, 但是上面有个搜索功能, 至于以前没有做过没有后台数据实现搜索功能, 所以今日到此一记录.
对于写这个功能也是对于页面死写的. 就比如: 一个页面有 20 个卡片, 让你去实现一个搜索功能, 这个功能不需要很百度那种模糊就能搜索出来.
思路
至于搜索就要获取到关键词, 以及要与关键词相匹配的词, 句, 至于这些词句的来源当然是在卡片上获取, 所以一进来就是获取页面上卡片的 text, 然后进行匹配, 但是获取回来的 text 要去空格, 然后保存起来.
例子
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- div { display: inline-block; padding: 25px; border: 1px solid red; margin:
- 10px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); }
- </style>
- </head>
- <body>
- <input>
- <button>
- 搜索
- </button>
- <div class="card_wra">
- <div>
- cdi vrd1
- </div>
- <div>
- fdd ivs
- </div>
- <div>
- mjhg
- </div>
- <div>
- 不管发生 事 故负担
- </div>
- <div>
- 割 发代首
- </div>
- <div>
- 655 个人
- </div>
- <div>
- cdiv 那边 rd1
- </div>
- <div>
- 0574 257
- </div>
- <div>
- ---- ===
- </div>
- <div>
- 刚刚发 扫 描件韩国
- </div>
- <div>
- 模板 半 年报
- </div>
- </div>
- <script src="js/jquery-3.3.1.js">
- </script>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- // 去除所有空格
- function Trim(str, is_global) {
- var result;
- result = str.replace(/(^\s+)|(\s+$)/g, "");
- if (is_global.toLowerCase() == "g") {
- result = result.replace(/\s/g, "");
- }
- return result;
- }
- // 获取各个卡片的 text, 用数组分开
- var $div = $(".card_wra>div"),
- txtArr = [];
- // 循环每个卡片的 text
- $($div).each(function(index, item) {
- // 将卡片的 text 对应放在数组中 (即使第一个 div 放到数组的第一项中), 并且去空格
- txtArr.push(Trim($(item).text(), "g"));
- }) $("button").on("click",
- function() {
- var searchVal = $("input").val().trim();
- // 判断是否输入
- if (searchVal === "") {
- $div.show();
- } else {
- // 遍历每个 div 的 text
- txtArr.forEach(function(val, index, arr) {
- // 判断是否找到与关键词对应的词语, 符合则返回为 0, 否为 - 1
- if (val.search(searchVal) === -1) {
- $($div).eq(index).hide();
- } else {
- $($div).eq(index).show();
- }
- })
- }
- })
- </script>
- </body>
- </HTML>
亲测有效, index 就是为了标志卡片的索引值, 查找到就显示该卡片, 否隐藏.
来源: http://www.qdfuns.com/article/48832/9bb4b23b87797f05a40877694429d524.html