博客

jQuery自动完成选择事件

  • Post category:jquery

jQuery自动完成选择事件可以在输入框中输入文字时自动匹配列表中的选项，提高用户的使用体验。下面详细讲解自动完成选择事件的完整攻略。

一、引入jQuery脚本

首先，在网页的head标签中引入jQuery库的脚本，可以从官网下载最新版本的jQuery库。例如：

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

二、构建HTML输入框与列表

在网页中添加输入框与下拉列表：

<label for="fruit">请选择果品:</label>
<input type="text" id="fruit" name="fruit">
<ul id="fruit-list"></ul>

其中，输入框的id为”fruit”，列表的id为”fruit-list”。

三、实现自动完成选择事件

使用jQuery实现自动完成选择事件，关键代码如下：

$(document).ready(function() {
  $('#fruit').on('input', function() {
    var inputVal = $(this).val();
    var fruitList = $('#fruit-list');
    fruitList.empty(); // 清空列表

    if (inputVal && inputVal.length > 0) {
      $.get('/api/fruits', { keyword: inputVal }, function(data) {
        if (data && data.length > 0) {
          $.each(data, function(index, fruit) {
            var li = $('<li>').text(fruit.name);
            li.appendTo(fruitList);

            li.on('click', function() {
              $('#fruit').val(fruit.name);
              fruitList.empty();
            });
          });
          fruitList.show();
        }
      });
    } else {
      fruitList.hide();
    }
  });
});

代码解释：

  1. 给输入框绑定input事件，当输入框中内容发生变化时触发；
  2. 获取输入框中的值；
  3. 发送Ajax请求获取与输入框中的值匹配的选项列表；
  4. 遍历返回的数据，将每个选项添加到列表中；
  5. 给每个选项绑定click事件，点击选项时将其值赋值给输入框并隐藏列表；
  6. 如果输入框的值为空，则隐藏列表。

四、示例说明

示例一

下面是一个简单的示例，根据输入框中的值从本地数组中进行模糊匹配，将匹配成功的选项显示在下拉列表中。

$(document).ready(function() {
  var fruits = [
    { name: 'apple' },
    { name: 'banana' },
    { name: 'cherry' },
    { name: 'durian' },
    { name: 'elderberry' },
    { name: 'fig' }
  ];

  $('#fruit').on('input', function() {
    var inputVal = $(this).val();
    var fruitList = $('#fruit-list');
    fruitList.empty();

    if (inputVal && inputVal.length > 0) {
      var filteredFruits = fruits.filter(function(fruit) {
        return fruit.name.toLowerCase().indexOf(inputVal.toLowerCase()) !== -1;
      });

      $.each(filteredFruits, function(index, fruit) {
        var li = $('<li>').text(fruit.name);
        li.appendTo(fruitList);

        li.on('click', function() {
          $('#fruit').val(fruit.name);
          fruitList.hide();
        });
      });

      fruitList.show();
    } else {
      fruitList.hide();
    }
  });
});

示例二

下面是一个使用Ajax从服务器动态获取选项列表的示例。在输入框中输入关键字时，将关键字发送给服务器获取匹配的选项列表。

$(document).ready(function() {
  $('#fruit').on('input', function() {
    var inputVal = $(this).val();
    var fruitList = $('#fruit-list');
    fruitList.empty();

    if (inputVal && inputVal.length > 0) {
      $.get('/api/fruits', { keyword: inputVal }, function(data) {
        if (data && data.length > 0) {
          $.each(data, function(index, fruit) {
            var li = $('<li>').text(fruit.name);
            li.appendTo(fruitList);

            li.on('click', function() {
              $('#fruit').val(fruit.name);
              fruitList.hide();
            });
          });

          fruitList.show();
        }
      });
    } else {
      fruitList.hide();
    }
  });
});

以上两个示例可以根据具体的需求进行修改。

Tags: