实现autocomplete——[js练习]

2024-01-15 19:10
文章标签 实现 js 练习 autocomplete

本文主要是介绍实现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

转载于:https://www.cnblogs.com/chivasknight/p/8289689.html

这篇关于实现autocomplete——[js练习]的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/609913

相关文章

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU

MySQL中查找重复值的实现

《MySQL中查找重复值的实现》查找重复值是一项常见需求,比如在数据清理、数据分析、数据质量检查等场景下,我们常常需要找出表中某列或多列的重复值,具有一定的参考价值,感兴趣的可以了解一下... 目录技术背景实现步骤方法一:使用GROUP BY和HAVING子句方法二:仅返回重复值方法三:返回完整记录方法四:

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》:本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方