搜索自动提示功能JS优化

CloudwiseAPM 发布于2019-08-21 10:22 / 3154人阅读

摘要：我的博客原文直奔主题，和百度的搜索框都会有这种自动提示关联词条的功能，自己最近接触的项目也有多个地方要做这个功能，后台开发咱不懂，所以从前端方面来说说这个功能的主要两点性能优化。

我的博客原文：http://arayzou.com/2013/12/18/%E6%90%9C%E7%B4%A2%E8%87%AA%E5%8A%A8%E6%8F%90%E7%A4%BA%E5%8A%9F%E8%83%BDJS%E4%BC%98%E5%8C%96/

直奔主题，google和百度的搜索框都会有这种自动提示关联词条的功能，自己最近接触的项目也有多个地方要做这个功能，后台开发咱不懂，所以从前端JS方面来说说这个功能的主要两点性能优化。

首先这个搜索框如果要触发自动提示的词条，肯定是每次keyup（咱们老大说keyup事件在某些浏览器里有问题，建议用keydown，但是我没发现问题，而且我觉得keyup后触发在某些情景下比keydown下要好，所以我用的keyup）事件后根据现在input里的value值来遍历相关联词条.

所以每次keyup后得到input里的value值，都需要根据value值请求后台来返回相关词条的内容，这里的ajax请求是用jsonp来做的，开发那边给到我一个地址格式，大概是这样:
http://xxx.com/xxx/xxx?X13XJsoncallback=jQuery17109596129641868174_1387338048392&keyword=1
两个关键的地方就是Jasoncallback和keyword，Jasoncallback是jsonp的格式，然后keyword后面跟的就是搜索的关键字，ajax代码大概是这样：


$.ajax({
     type: "get",
     url: "http://xxx.com/xxx/xxx?",
     dataType: "jsonp",
     data:"Keyword=" + encodeURIComponent(inputvalue),
     jsonp: "Jsoncallback",
     jsonpCallback:"askTag",//任意值，即jasoncallback后的值
     success: function (data) {
          //显示自动提示框，给框里填关联词条的内容
     },
     error: function () {
          //alert("返回失败!");
     }
});

好了，到这里这个功能就做好了，用户在每次keyup之后都会调用ajax来请求后台数据然后显示关联词条。

现在说下JS优化部分，当你做到刚才说的那些之后，你会发现你每输入一个字母都会调用一次ajax，这样的ajax调用太频繁了而且没有必要，拿最流行的搜狗拼音输入法来说，你每输入一个字母，都已经是给input赋值了，这样都会调用一次ajax，但是这时候的拼音所关联的内容基本上不会是你想要的，你想要的只是打出来的汉字所关联的内容。

1、ajax调用做下延迟执行

我们肯定做不到根据输入内容来判断是否执行ajax关联，但是我们可以对ajax调用做下延迟执行。这样当用户输入内容时，如果两次按键的间隔时间过小（我认为大概在200毫秒，可以根据自己的服务器速度和用户体验来调整这个时间），就可以当做他是在继续输入他想要的内容，这时候没有必要来显示关联内容。代码如下：


var timeout = 0;
$("input").keyup(function(){
    clearTimeout(timeout);
    timeout = setTimeout(function(){
        $.ajax({
        });
    },200);
});

好了，这样就可以有效的减少没必要的ajax请求了。

2、ajax请求到的内容作缓存

第二点优化是给ajax请求到的内容作缓存，大概意思就是说，你输入了“上海”，这时候做了一次ajax请求，然后你继续输“上海东方明珠”，这时候又有一次ajax请求，然后你把“东方明珠”删掉了，这时候input里的值是“上海”，前面已经请求过一次“上海”的ajax请求了，现在又要重复请求一次关键字是“上海”的ajax请求。

这样的话就有点浪费，所以我们可以把每次ajax请求的关键字和请求得到的内容先存到一个变量a中去，然后每次keyup后先判断变量a里有没有这个关键字所请求到的内容，如果有，就读取现有的内容，如果没有再请求ajax，这样又可以有效的减少ajax请求数了。
代码如下：


var timeout = 0;
var ajaxCache = {};//定义缓存对象
$("input").keyup(function(){
    var inputValue = $(this).val();
    clearTimeout(timeout);
    timeout = setTimeout(function(){
        if(!!ajaxCache[inputValue]){
            //显示自动提示框，给框里填关联词条的内容
        }else{
            $.ajax({
                success:function(data){
                    //显示自动提示框，给框里填关联词条的内容
                    ajaxCache[inputValue]=[];
                    ajaxCache[inputValue]=data;//给缓存对象赋值
                }
            });
        }
    },200);
});

总结一下两点优化就是给ajax做延迟并给ajax做缓存，有效减少ajax请求来优化前端性能。如有其他优化建议欢迎留言讨论~~

GPU云服务器云服务器搜索自动提示自动搜索提示 js搜索提示框 js实现搜索输入提示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85419.html

超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

摘要：分享一些超好用插件，打造一个不一样的浏览器编辑器。一谷歌浏览器插件谷歌访问助手强烈推荐一键安装，无需其他配置，即可访问谷歌。谷歌浏览器是很耗内存的，该插件会自动挂起长时间未使用的网页，来释放系统资源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一个不一样的 GitHub、浏览器、...

Rango 2019-08-22 15:45 评论0 收藏0
15.搜索功能的实现与页面倒计时跳转

摘要：我们的导航条有搜索输入框和按钮，现在我们来完善这部分功能。然后设计一个，其样式如下不仅在倒计时结束后跳转回首页，还增加了一个立即跳转的按钮通过实现，其代码如下提示提示信息未找到相关结果，秒后将自动跳转回首页。我们的导航条有搜索输入框和按钮，现在我们来完善这部分功能。首先搜索的逻辑，我们简单地设定为问题的title或者content包含搜索的关键字即可。假设搜索的关键字存在变量keyw...

DobbyKim 2019-07-30 15:29 评论0 收藏0
UCloud控制台产品升级！

摘要：主机接入新表格组件支持拖拽调整表头列宽背景现状客户对于主机名称的命名规则厂商地域可用区产品业务服务内网，名称较长，无法在列表页直观展示，只能手动上去显示全部。如有关于控制台产品的前端及视觉优化建议也欢迎和我们部门同学反馈。2月份根据用户反馈、用户调研以及自身使用产品体验，将主机列为重点体验优化目标产品，主要针对如下业务场景进行了优化：主机创建页可用区售罄地域切换优化主机列表页主机接入新表格组...

ernest.wang 2022-07-02 18:40 评论0 收藏0
前端硬核面试专题之 HTML 24 问

摘要：前言本文讲解前端面试的的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累注意文章的题与题之间用下划线分隔开，答案仅供参考。返回当前文档的标题。改用则可以进行针对性的和避免不必要的。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 1. 前言本文讲解前端面试的 HTML 的内容。复习前端面...

honhon 2019-08-26 10:37 评论0 收藏0