Axure知识点：如何制作输入关键词模糊搜索功能？

一时失言乱红尘 2022-12-13 04:22 258阅读 0赞

> 摘要：微信搜索【[三桥君][Link 1]】

## 一、问题 ##

我们都知道，很多网页软件都有输入关键词然后模糊搜索内容的功能。例如，商城的模糊搜索是产品信息。  
![在这里插入图片描述][20201009231033872.png_pic_center]  
三桥君今天要讲的就是关于商城的关键词模糊搜索功能如何实现。  
Axure交互效果预览：[https://taipsa.axshare.com][https_taipsa.axshare.com]

## 二、解决过程 ##

首先，我们应该明白搜索框输入的关键词是来自商品的标题搜索的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center]  
然后，我们在Axure中制作好中继器，在搜索按钮上添加交互效果，能让他实现根据输入搜索框的关键词去模糊搜索商品的标题。

> 说明：  
> 添加筛选的目标是中继器，这里三桥君命名为商品列表；  
> 规则是用特定的**关键词模糊搜索函数**；  
> GoodsName是商品名称的命名，Item.GoodsName是用插入变量的；  
> Search是搜索框的命名；  
> 记得检查括号里的单引号要去掉。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 1]  
关于**关键词的模糊搜索函数**就是这个。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 2]  
按上述规则去操作，即可实现关键词模糊搜索功能。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 3]

## 三、升级功能 ##

如何在搜索框中输入关键词时自动模糊搜索出商品信息，而不用点搜索按钮？  
![在这里插入图片描述][20201009234025485.gif_pic_center]

我们只需要在搜索框中添加文本改变时的交互，然后跟上面一样添加相同的筛选交互即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 4]

--------------------

> 文章整理不易，如有帮助请点赞关注支持，谢谢！微信搜索【[三桥君][Link 1]】，回复【关注】有我准备的一份资源大礼包。后续持续更新~~~

[Link 1]: https://blog.csdn.net/weixin_46218781
[20201009231033872.png_pic_center]: /images/20221123/f19feb8ea30f446186da50ea2bc77da4.png
[https_taipsa.axshare.com]: https://taipsa.axshare.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/dc0e65dbe9dd4bee876c9289e5a56eb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/506afc95f7b54d99b28fcbfa4790f59a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/06ce4b1bde8b4c3a99d60dee2a191d31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/c5f84b969c384ac292356897ccc5f9ae.png
[20201009234025485.gif_pic_center]: /images/20221123/b41f898eceaf4f00aa9d732b07c8a7ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/1e8af2cb4c38406aa38cbfe8d3d0289c.png