Detailed explanation of the steps to implement fuzzy matching query in HTML page text box using jQuery-JS Tutorial-php.cn

Detailed explanation of the steps to implement fuzzy matching query in HTML page text box using jQuery

php中世界最好的语言

Release： 2018-05-22 14:10:48

Original

1850 people have browsed it

This time I will bring you a detailed explanation of the steps for jQuery to implement fuzzy matching query for HTML page text boxes. What are the precautions for jQuery to implement fuzzy matching query for HTML page text boxes. The following is a practical case. Let’s take a look. one time.

This function needs to be used in the project. I have used Combobox in EasyUI and searched for corresponding solutions online. However, they are not suitable for my project because I still like relatively pure things. I wrote one myself. It is relatively simple, but still usable. I have already used it in my project. I made a small demo for record. If necessary, just copy the code and modify it.

The next is the code, pure html css jquery:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <title>jQuery模糊匹配查询</title>
  <style type="text/css">
    #p_main {
      margin: 0 auto;
      width: 300px;
      height: 400px;
      border: 1px solid black;
      margin-top: 50px;
    }
    #p_txt {
      position: relative;
      width: 200px;
      margin: 0 auto;
      margin-top: 40px;
    }
    #txt1 {
      width: 99%;
    }
    #p_items {
      position: relative;
      width: 100%;
      height: 200px;
      border: 1px solid #66afe9;
      border-top: 0px;
      overflow: auto;
      display: none;
    }
    .p_item {
      width: 100%;
      height: 20px;
      margin-top: 1px;
      font-size: 13px;
      line-height: 20px;
    }
  </style>
</head>
<body>
  <p id="p_main">
    <!--表单的autocomplete="off"属性设置可以阻止浏览器默认的提示框-->
    <form autocomplete="off">
      <p id="p_txt">
        <!--要模糊匹配的文本框-->
        <input type="text" id="txt1" />
        <!--模糊匹配窗口-->
        <p id="p_items">
          <p class="p_item">周杰伦</p>
          <p class="p_item">周杰</p>
          <p class="p_item">林俊杰</p>
          <p class="p_item">林宥嘉</p>
          <p class="p_item">林妙可</p>
          <p class="p_item">唐嫣</p>
          <p class="p_item">唐家三少</p>
          <p class="p_item">唐朝盛世</p>
          <p class="p_item">奥迪A4L</p>
          <p class="p_item">奥迪A6L</p>
          <p class="p_item">奥迪A8L</p>
          <p class="p_item">奥迪R8</p>
          <p class="p_item">宝马GT</p>
        </p>
      </p>
    </form>
  </p>
</body>
</html>
<script type="text/javascript">
  //弹出列表框
  $("#txt1").click(function () {
    $("#p_items").css('display', 'block');
    return false;
  });
  //隐藏列表框
  $("body").click(function () {
    $("#p_items").css('display', 'none');
  });
  //移入移出效果
  $(".p_item").hover(function () {
    $(this).css('background-color', '#1C86EE').css('color', 'white');
  }, function () {
    $(this).css('background-color', 'white').css('color', 'black');
  });
  //文本框输入
  $("#txt1").keyup(function () {
    $("#p_items").css('display', 'block');//只要输入就显示列表框
    if ($("#txt1").val().length <= 0) {
      $(".p_item").css('display', 'block');//如果什么都没填，跳出，保持全部显示状态
      return;
    }
    $(".p_item").css('display', 'none');//如果填了，先将所有的选项隐藏
    for (var i = 0; i < $(".p_item").length; i++) {
      //模糊匹配，将所有匹配项显示
      if ($(".p_item").eq(i).text().substr(0, $("#txt1").val().length) == $("#txt1").val()) {
        $(".p_item").eq(i).css('display', 'block');
      }
    }
  });
  //项点击
  $(".p_item").click(function () {
    $("#txt1").val($(this).text());
  });
</script>

Copy after login

I believe you have mastered the method after reading the case in this article, please pay attention to php for more excitement Other related articles on the Chinese website!