AngularJS实现搜索关键字高亮显示效果
在前端开发中,搜索功能是常见的需求之一。为了提高用户体验,我们需要将搜索结果中的关键字高亮显示。本文将介绍如何使用AngularJS实现这一功能,并提供示例代码。
实现思路
实现搜索关键字高亮显示的基本思路是,先通过正则表达式匹配搜索关键字,在匹配到的文本中加入HTML标签,从而实现高亮效果。具体实现过程如下:
- 获取搜索关键字
- 遍历展示搜索结果的元素
- 在每个元素中找到匹配搜索关键字的文本
- 使用正则表达式对文本进行匹配
- 将匹配到的文本加入HTML标签,如
<span class="highlight">
- 将加入HTML标签的文本替换原有文本
- 完成高亮显示效果
实现步骤
第一步:导入AngularJS依赖
在HTML文件中导入AngularJS的核心库和编写控制器所需模块:
------- ------------------------------------------------------------------------------------ ------- ---------------------------------------------------------------------------------------------
第二步:定义控制器
创建一个控制器,用于实现搜索关键字高亮显示的功能:
------------------------------------- ---------------- ----- - -- ------- -------------- - --- -- --------- ----------- - ------ ----- ----- --- ----- ----------- ---------- ----- --- ------- ----- ---- ------ ------- ---- --- ----------- ------- --- ------ ------ ------ -- ----- ----------- -------- ----- ------------ ------ --- ----- ---------- -- -------- --- -------- ------ --------- ----------- ----- -- ------ -- -------- ---- --- ------ --- -------- ---- --- ---- ------ -------- ------- -- -------------- ---------------- - ---------- - --- ----- - --- ---------------------- ------ --- --------------- - -------------------------- ------ ------------------------------ ---------------------- - ---------------------------------- -- ---
在上述代码中,我们定义了搜索关键字和需要展示的文本。highlight()
方法利用正则表达式匹配关键字,将匹配到的文本加入HTML标签,最终得到高亮显示的文本。
第三步:编写HTML模板
在HTML文件中添加以下代码:
---- ------------------------------------ ------ ----------- ------------------ ----------------------- ------------------- --------- -- ----------------------------------- ------
在上述代码中,我们利用ng-model
指令获取用户输入的搜索关键字。当用户输入关键字时,highlight()
方法会被调用,实现关键字高亮显示的功能。最后在HTML模板中使用ng-bind-html
指令展示高亮显示的文本。
第四步:添加CSS样式
为了让高亮效果更加明显,我们需要在CSS文件中添加以下代码:
---------- - ----------------- -------- -
在上述代码中,我们定义了高亮显示文本所需的CSS样式。
示例代码
完整的实现代码如下:
--------- ----- ----- ------------- ------ ----- ---------------- ---------------- ------ --------- ------------ ------- ---------- - ----------------- -------- - -------- ---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------