优秀的编程知识分享平台

网站首页 > 技术文章 正文

JQ实现输入内容过滤搜索数据功能（js筛选搜索过滤）

nanyue 2024-09-11 05:26:11 技术文章 5 ℃

示例简介

本文介绍利用JQ实现输入内容过滤搜索数据功能（焦点过滤、空全部显示和模糊过滤等），效果如下：

实现过程

html、css和逻辑代码都有详细的注释，可自行参考。

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="utf-8">
  <style>
    *{padding:0;margin:0;}
    .search-box{width:300px;margin:30px;}
    .search-box .inputSearch{border:1px solid #f2f2f2;padding:10px 15px;width:300px;box-sizing: border-box;}
    .search-result{width:100%;background-color: #fff;box-shadow: 0px 3px 20px 0px rgba(13, 40, 80, 0.13);box-sizing: border-box;text-align: left;display:none;}
    .search-result .result-box li{height:34px;line-height: 34px;cursor: pointer;padding:0 15px;list-style: none;}
    .search-result .result-box li:hover{background-color: #f0f3f6;color: #5494df;}
</style>
</head>


<body>
  <div class="search-box">
    <input type="text" placeholder="请输入搜索关键字" class="inputSearch" />
    <div class="search-result">
      <ul class="result-box">
      </ul>
    </div>
  </div>
</body>
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
var list = [{
    "name": "晗宝SVANA的小店",
    "mongodbID": "611472d6d5a87b1e26ff21c0"
  },
  {
    "name": "晗宝SVANA的小店1",
    "mongodbID": "61147536d5a87b1e26ff21c8"
  },
  {
    "name": "晗宝SVANA的小店2",
    "mongodbID": "6114875dd5a87b1e26ff21d4"
  },
  {
    "name": "晗宝SVANA的小店3",
    "mongodbID": "6108f131d5a8a8763698f74b"
  },
  {
    "name": "晗宝SVANA的小店4",
    "mongodbID": "6109f28cd5a8a8763698f75d"
  },
  {
    "name": "晗宝",
    "mongodbID": "6109f28cd5a8a8763698f75d"
  },
  {
    "name": "SVANA的小店",
    "mongodbID": "6109f28cd5a8a8763698f75d"
  }
];
$(function() {
  // 输入框触发焦点
  $(".inputSearch").focus(function(event) {
    searchData(event);
  });
  // 键盘输入触发
  $(".inputSearch").keyup(function(event) {
    searchData(event);
  });
  // 点击数据列表
  $(".search-result .result-box").on('click', 'li', function(event) {
    event.preventDefault();
    var id = event.currentTarget.dataset.id;
    $(".inputSearch").val($(this).text());
    $('.search-result').css('display', 'none');
  });
});
// 搜索函数
function searchData(event) {
  // 获取值
  var str = $(".inputSearch").val();
  // 去空格
  str = str.replace(/\s+/g, "");
  // 如果是enter键、上下键返回
  if (event.keyCode == 13 || event.keyCode == 38 || event.keyCode == 40) {
    return false;
  }


  if (str == '') { // 空搜索显示全部数据
    renderData(list);
  } else {
    var reg = new RegExp(str, 'ig')
    var newArr = list.filter(function(obj, index, array) {
      return obj.name.match(reg);
    });
    if (newArr == 0) { // 输入数据不匹配
      $('.search-result').css('display', 'none');
      return false;
    }
    renderData(newArr); // 显示过滤数据
  }
}


// 渲染搜索列表数据
function renderData(arr) {
  $('.search-result').css('display', 'block');
  var resultHtml = '';
  $.each(arr, function(index, val) {
    resultHtml += '<li data-id=' + val.mongodbID + '>' + val.name + '</li>'
  });
  $(".search-result .result-box").html(resultHtml);
}
</script>


</html>

Tags：

猜你喜欢

最近发表
标签列表