jQuery实现用户输入自动完成功能

下面是详细讲解jQuery实现用户输入自动完成功能的完整攻略：

1. 理解自动完成功能

用户输入自动完成功能是指，在用户在输入框中输入内容时，根据已经输入的文本，自动匹配可能的选项，并展示给用户。当用户点击某个选项时，将文本框的值设为该选项的值。

实现自动完成功能的技术手段很多，比如Ajax、原生JavaScript和jQuery等，其中jQuery封装了大量常用功能，可以让开发者轻松实现自动完成功能。

2. 引入jQuery库

要使用jQuery实现自动完成功能，首先我们需要引入jQuery库，可以选择CDN或本地文件引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

3. 建立输入框和选项列表

接下来，我们需要在页面中建立一个输入框和一个选项列表，用于展示可能的选项：

<input type="text" id="myInput" placeholder="请输入...">
<ul id="myUL"></ul>

4. 编写jQuery代码

下面就是实现自动完成功能的核心代码了。基本思路是，当输入框中的文本发生变化时，触发一个函数，该函数将输入框文本的值发送到服务器，由服务器返回可能的选项，并将这些选项展示出来。

$(document).ready(function(){
  // 当输入框中的文本发生变化时触发
  $("#myInput").on("input", function() {
    // 获取输入框中的文本
    var inputValue = $(this).val();
    // 发送Ajax请求
    $.ajax({
      url: "server.php", //服务器网址
      data: {'inputValue': inputValue}, //要发送的数据
      dataType: "json", //服务器响应的数据格式
      type: "POST", //发送请求的方法
      success: function(result) {
        // 将所有选项添加到选项列表中
        $("#myUL").empty();
        $.each(result, function(i, value) {
          $("#myUL").append("<li>" + value + "</li>");
        });
      },
      error: function() {
        $("#myUL").empty();
      }
    });
  });
});

5. 完整示例

下面是一个完整的示例，实现了一个从服务器动态加载选项的自动完成功能：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery自动完成示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    ul { 
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    li {
      padding: 10px;
      margin-bottom: 5px;
      cursor: pointer;
      background-color: #f2f2f2;
    }

    li:hover {
      background-color: #666;
      color: white;
    }
  </style>
</head>
<body>

<h2>jQuery自动完成示例</h2>

<input type="text" id="myInput" placeholder="请输入...">
<ul id="myUL"></ul>

<script>
$(document).ready(function(){
  // 当输入框中的文本发生变化时触发
  $("#myInput").on("input", function() {
    // 获取输入框中的文本
    var inputValue = $(this).val();
    // 发送Ajax请求
    $.ajax({
      url: "server.php", //服务器网址
      data: {'inputValue': inputValue}, //要发送的数据
      dataType: "json", //服务器响应的数据格式
      type: "POST", //发送请求的方法
      success: function(result) {
        // 将所有选项添加到选项列表中
        $("#myUL").empty();
        $.each(result, function(i, value) {
          $("#myUL").append("<li>" + value + "</li>");
        });
      },
      error: function() {
        $("#myUL").empty();
      }
    });
  });

  // 当用户点击列表中的选项时，更新输入框的值
  $(document).on("click", "#myUL li", function() {
    $("#myInput").val($(this).text());
    $("#myUL").empty();
  });
});
</script>

</body>
</html>

6. 示例说明

上述示例中，在输入框中输入文本时，会动态从服务器获取与输入文本相关的选项，将这些选项展示在一个无序列表中。当用户在选项列表中点击一个选项时，该选项的文本会自动填充到输入框中。

示例中用到了jquery.on()方法，在动态生成的列表中，绑定了click事件，监听的是li元素。这样在用户点击li元素时，才能触发回调函数对事件做出相应的反应

参考资料

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现用户输入自动完成功能 - Python技术站