实现autocomplete——[js练习]

时间 2019-12-08

原文原文链接

实现 AutoComplete

AutoComplete 是指用户在文本框输入前几个字母或是汉字的时候，该控件就能从存放数据的文本或是数据库里将全部以这些字母开头的数据提示给用户，供用户选择，提供方便。效果以下图所示：css

基础准备

已提供基础的 HTML 和 CSS

在 index.js 文件中定义了变量 data, 变量 data 表示文本提示的范围数组

// 提示范围数据 var data = ['apple', 'banana', 'carambola', 'grape', 'lemon', 'orange', 'watermelon'];

题目要求

实现 AutoComplete 的功能逻辑 (可以使用 jQuery)，具体效果以下:html

一、完善 input 框 focus 事件绑定逻辑，当事件触发时，显示 .autocomplete 提示框和相应的提示内容，并定位到触发事件的输入框的正下方。要求同时只能出现一个 .autocomplete 提示框

二、完善 input 输入框的 keyup 事件绑定逻辑，同时获取输入框内容，修改 .autocomplete 提示框的提示选项内容

三、完善 .autocomplete .item 的 click 事件绑定逻辑，当点击提示框选项时，填充选项文本数据到相应的input框中

提示

了解字符串的 indexOf() 方法，经过使用 indexOf() 判断是不是匹配提示的的字符。
可以使用 jQuery 的 offset() 返回匹配元素相对于文档的偏移（位置）。
可以使用 jQuery 的 outerHeight() 获取元素的当前计算高度值,包括padding，border和选择性的marginJavaScript indexOf() 方法

截图来源：http://www.w3school.com.cn/jsref/jsref_indexOf.aspjquery

截图来源：http://www.w3school.com.cn/jquery/css_offset.asp数据库

.outerHeight()

参考网址：http://api.jquery.com/outerHeight/api

HTML代码以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实现 autocomplete</title>
</head>
<body>
    <!-- 请在index.js文件中完成练习    -->
    <input type="text">
    <input type="text">
    <ul class="autocomplete">
        <!--提示内容结构以下：<li class="item">apple</li>-->
    </ul>
    <!-- 引入jQuery-->
    <script src="https://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

Index.js初始

// 提示范围数据
var data = ['apple', 'banana', 'carambola', 'grape', 'lemon', 'orange', 'watermelon'];

// 获取全部的inputs
var $autocomplete = $('.autocomplete');
var $curInput;
var $window = $(window);
var $body = $(document.body)

/**
 * 一、完善 `input` 框 `focus` 事件绑定逻辑，当事件出发时，设置 `.autocomplete` 提示框显示，并定位到触发事件的输入框的正下方。
 * 注：要求同时只能出现一个 `.autocomplete` 提示框
 */
$body.on('focus', 'input', function() {

});
/**
 * 二、完善 `input` 输入框的 `keyup` 事件绑定逻辑，同时获取输入框内容，修改  `.autocomplete` 提示框的提示选项内容
 */
$body.on('keyup', 'input', function() {

});
/**
 * 三、完善 `.autocomplete .item` 的 `click` 事件绑定逻辑，当点击提示框选项时，填充选项文本数据到相应的input框中
 */
$body.on('click', '.autocomplete .item', function() {

});

思路：

1. 输入框 focus 的时候，提示框出如今输入框正下方，而且只有一个。

首先，输入框 focus 的时候，要显示提示框，这里的难点是计算提示框的位置。数组

经过 jQuery 的 offset() 方法获取输入框的 top 和 left,
设置提示框的 left 等于输入框的 left，
设置提示框的 top 等于输入框的 top 加上输入框的高度 (可经过 jQuery 的 outerHeight() 来获取)
根据输入框的内容遍历题目给的提示数据，展现在提示框中。

下面是参考代码：浏览器

$body.on('focus', 'input', function() {
  // 获取输入框当前的位置
  var position = $(this).offset();
  var value = $(this).val();
  // 计算 $autocomplete 须要展现的位置
  $autocomplete.css({
    'left': position.left,
    'top': position.top + $(this).outerHeight(),
    'display': 'block'
  });
  // 更新当前的 input 对象
  $curInput = $(this);
  // 展现autoComplete
  autoComplete(value);
});

2. 当输入框输入内容的时候，提示框显示匹配的内容。

咱们在浏览器的 keyup 事件回调中，须要作如下几步：app

获取用户的输入内容，
根据输入内容，筛选提示数据 data (可以使用 indexOf() )

$body.on('keyup', 'input', function() {
  // 获取输入框的值
  var value = $(this).val();
  // 将输入框的值传入 autoComplete 函数
  autoComplete(value);
})

/**
* 根据输入展现匹配的提示内容
*/
function autoComplete(value) {
  var itemsArr = [];
  // 遍历数据筛选数据
  data.forEach(function (item) {
    // 使用 indexOf 判断输入内容与提示内容是否匹配
    if (item.indexOf(value) > -1) {
      itemsArr.push('<li class="item">' + item +'</li>');
    }
  });
  $autocomplete.html(itemsArr.join(''));
}

3. 点击提示内容时，将被点击的内容填入输入框中。

当选项被点击时，须要作如下几步：dom

获取被点击提示选项和其文本
将提示文本输入到当前 focus 的输入框中。

$body.on('click', '.autocomplete .item', function() {
  var itemValue = $(this).text();
  $curInput.val(itemValue);
  $autocomplete.hide();
})

到这里，就能够实现题目要求的全部功能了。ide

总结

本题涉及到 dom 操做，元素定位，数组处理，字符串匹配等多方面的内容，比较复杂，可是只要将问题拆解，一步步实现，其实也不是很难。

完整参考代码以下：

// 提示范围数据
var data = ['apple', 'banana', 'carambola', 'grape', 'lemon', 'orange', 'watermelon'];

// 获取全部的inputs
var $autocomplete = $('.autocomplete');
var $curInput;
var $window = $(window);
var $body = $(document.body);

/**
 * 一、完善 `input` 框 `focus` 事件绑定逻辑，当事件出发时，设置 `.autocomplete` 提示框显示，并定位到触发事件的输入框的正下方。
 * 注：要求同时只能出现一个 `.autocomplete` 提示框
 */
$body.on('focus', 'input', function() {
  // 获取输入框当前的位置
  var position = $(this).offset();
  var value = $(this).val();
  // 计算 $autocomplete 须要展现的位置
  $autocomplete.css({
    'left': position.left,
    'top': position.top + $(this).outerHeight(),
    'display': 'block'
  });
  // 更新当前的 input 对象
  $curInput = $(this);
  // 展现autoComplete
  autoComplete(value);
});
/**
 * 二、完善 `input` 输入框的 `keyup` 事件绑定逻辑，同时获取输入框内容，修改  `.autocomplete` 提示框的提示选项内容
 */
$body.on('keyup', 'input', function() {
  var value = $(this).val();
  autoComplete(value);
});
/**
 * 三、完善 `.autocomplete .item` 的 `click` 事件绑定逻辑，当点击提示框选项时，填充选项文本数据到相应的input框中
 */
$body.on('click', '.autocomplete .item', function() {
  var itemValue = $(this).text();
  $curInput.val(itemValue);
  $autocomplete.hide();
});

/**
 * 优化: 点击非input的地方则隐藏 $autocomplete
 */
$window.on('click', function(event) {
  var target = event.target;
  if (target.tagName !== 'INPUT') {
    $autocomplete.hide();
  }
});

/**
 * 展现提示框
 * @param [String] value 判断提示的文本
 */
function autoComplete(value) {
  var itemsArr = [];
  // 遍历数据筛选数据
  data.forEach(function (item) {
    if (item.indexOf(value) > -1) {
      itemsArr.push('<li class="item">' + item +'</li>');
    }
  });
  $autocomplete.html(itemsArr.join(''));
}

练习出处：https://ke.qq.com