jQuery-App输入框实现实时搜索

1、实现实时搜索
其实原理就是很简单,实时获取输入框的值即可,并且对不同情况操作进行不同处理。
2、

这里只贴出主要事件语句代码,具体一些操作要视具体情况而定
// 监听搜索框的内容变化 实现实时搜索
    $(".searchContent").bind("input propertychange change", function () {
      studentName = $(".searchContent").val();
      var searchContent = $(".searchContent").val();
      if (searchContent.length > 0) {
        $(".clearSearchContent").removeClass("none");
        $(".clearSearchContent").on("click", function () {
          $(".searchContent").val("");
          studentName = $(".searchContent").val();
          pageIndex = 1;
          $(".clearSearchContent").addClass("none");
          $(".searchContent").focus();
        })
      }
    });
    // 搜索框失去焦点时 如果搜索框没有内容则恢复搜索前状况 如果有内容则搜索
    $(".searchContent").on("blur", function () {
      if ($(".searchContent").val().length == 0) {
        $(".searchContent").attr("placeholder", "搜索");
        $(".searchContent").css("background-image", "url(./res/png/magnify.png)");
        $(".cancelSearchBtn").addClass("none");
        $(".searchImg").addClass("none");
      } else {
        studentName = $(".searchContent").val();
       
    })
    //搜索框获得焦点时,并且搜索框有内容的时候,出现打叉,打叉可以清空搜索框内容并加载全部请假单
    $(".searchContent").on("focus", function () {
      $(".searchContent").attr("placeholder", "");
      $(".searchContent").css("background-image", "");
      $(".searchImg").removeClass("none");
      var searchContent = $(".searchContent").val();
      if (searchContent.length > 0) {
        $(".clearSearchContent").removeClass("none");
        $(".clearSearchContent").on("click", function () {
          $(".searchContent").val("");
        });
      }
    });

    // 当滑动请假单列表时 输入框失去焦点 则隐藏输入键盘和填写请假单的按钮
    $(document).scroll(function () {
      if ($(".searchContent").is(":focus")) {
        $(".searchContent").blur();
      }
    });

    // 点击手机键盘的搜索/开始按钮进行搜索
    $(document).keydown(function (event) {
      if (event.keyCode == 84 || event.keyCode == 13) {
        studentName = $(".searchContent").val();
        pageIndex = 1;
        if (mineManagement) {
          inquireMyManageClassesList(pageIndex);
        } else {
          loadData(pageIndex);
        }
      }
    });

    // 点击取消 情况搜索框的输入内容 并加载全部请假单
    $(".cancelSearchBtn").on("click", function () {
      $(".searchContent").val("");
      $(".searchContent").attr("placeholder", "搜索");
      $(".searchContent").css("background-image", "url(./res/png/magnify.png)")
      $(".cancelSearchBtn").addClass("none");
      $(".searchImg").addClass("none");
      studentName = "";
     
    });

    // 点击搜索图标进行搜索
    $(".searchImg").on("click", function () {
      studentName = $(".searchContent").val();
      pageIndex = 1;
    
    });

你可能感兴趣的:(jQuery-App)