实现autocomplete——[js练习]

实现 AutoComplete

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

基础准备

已提供基础的 HTML 和 CSS

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

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

题目要求

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

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

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

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

提示

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

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

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

.outerHeight()

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

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)

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

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

});
/**
 * 3、完善 `.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 事件回调中，需要做以下几步：

获取用户的输入内容，
根据输入内容，筛选提示数据 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. 点击提示内容时，将被点击的内容填入输入框中。

当选项被点击时，需要做以下几步：

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

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

到这里，就可以实现题目要求的所有功能了。

总结

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

完整参考代码如下：

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

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

/**
 * 1、完善 `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);
});
/**
 * 2、完善 `input` 输入框的 `keyup` 事件绑定逻辑，同时获取输入框内容，修改  `.autocomplete` 提示框的提示选项内容
 */
$body.on('keyup', 'input', function() {
  var value = $(this).val();
  autoComplete(value);
});
/**
 * 3、完善 `.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

posted @ 2018-01-15 20:04 chivasknight 阅读(970) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

chvias