百度搜索下拉提示框实现

    最近在做百度IFE前端技术学院的题,然后有一题就是模拟百度搜索智能提示。题目是开源的,稍后给出地址。

    因为博主没学过后端啊,欲哭无泪,所以不能实现后端模糊搜索,那如果前端ajax纯粹请求一份同样的数据,效果就不好。

    机智的博主直接把百度搜索api借来一下。

    直接从开发者工具,监控网络,找到请求地址。

  百度api:

    我把api缩减了一下,删除了大部分暂时用不上的参数。

    https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abc&json=1&p=3&cb=Aralic&t

参数
wd 关键字
json 1
p 3
cb 回调函数

 参数说明:

      在这里只需要关注两个参数,第一个就是要请求的关键字,第二个是回调函数。相信太多人都了解jsonp,全称是json with padding。如果有不熟悉的,可以从园子里面看看其他大牛的博客先了解一下。

  html代码:

<div id="container">
        <input type="text" id="kw">
        <ol id="dataList">
        </ol>
</div>

  javascript 部分:

  问题和功能实现大致分为六部分:

    1、什么时候请求数据或者触发请求数据的条件是什么?

    2、怎么去请求数据?

    3、数据怎么格式处理?

    4、处理的数据怎么放到页面中?

    5、实现键盘上下按键切换下拉提示

    6、enter按键打开新页面,跳转到搜索结果

  解决方案:

    1、我能说针对问题1我就去查资料了吗?

      在input搜索内,可以添加的键盘事件按时间分别为onkeydown<onkeypress<onkeyup. 如果不通过判断输入的键值码,那么为了得到搜索框内刚输入的值,就只能用onkeyup事件了,不然无法获取刚刚输入的值。

    2、请求数据方法,激动人心的时刻到了,到贴代码了。

//按键抬起事件
function getData() {
    //下拉提示列表
    var oDataList = $(‘#dataList‘);
    //搜索框
    var sInput = $(‘#kw‘);
    var oldValue = null;
    //当前文本框的值不为空 且和之前不相同
    if (sInput.value != ‘‘ && sInput.value != oldValue) {
        //创建script标签
        var oScript = document.createElement(‘script‘);
        //获取时间戳
        var oTime = new Date().getTime()
        oScript.src = ‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=‘+(sInput.value)+‘&json=1&p=3&cb=Aralic&oTime‘;
        document.body.appendChild(oScript);
    } else if (sInput.value == ‘‘) {
        // 如果文本框值为空 清除oDataList的内容并隐藏
        oDataList.style.display = ‘none‘;
        oDataList.innerHTML = "";
    }
    oldValue = sInput.value;
}

    3、数据的处理,这是jsonp请求的数据,所以需要在全局新建一个一个函数。参数为data(jsonp发送来的数据);

      可以直接从chrome开发者工具,网络下找到请求,然后右侧有个Preview可以预览返回的数据,当然也有更简单的一个格式化方法

      直接在函数里面控制台打印数据,这样阅读格式化的数据了。

       

      

      返回了一个json数据,q表示搜索关键字,s是数组类型,返回的匹配值。

      4、数据的处理并且添加到页面中。

//jsonp的回调函数
function Aralic(data) {
    console.log(data);
    var oDataList = $(‘#dataList‘);
    var sInput = $(‘#kw‘);
    var str = ‘‘;
    var iNow = -1;

    //当有数据返回时
    if (data.s.length) {
        //拼接字符串
        for (var i = 0; i<data.s.length; i++) {
            str += ‘<li><a href="https://www.baidu.com/s?wd=‘+data.s[i]+‘" target=_blank>‘+data.s[i]+‘</a></li>‘;
        }
        oDataList.style.display = ‘block‘;
        oDataList.innerHTML = str;

        //↑ ↓ 两个按键事件
        document.onkeydown = function(ev) {

            var ev = ev || window.event;
            var aLi = oDataList.getElementsByTagName(‘li‘);
            //↓键
            if (ev.keyCode == 40) {

                for (var i = 0; i<aLi.length; i++) {
                    aLi[i].className = ‘‘;
                }

                iNow ++;
                if (iNow == aLi.length) {
                    iNow = 0;
                }
                //移除给文本框的绑定事件
                removeEvent(sInput, ‘keyup‘, getData);
                sInput.value = data.s[iNow];
                aLi[iNow].className = "active";

            } else if (ev.keyCode == 38) {

                for (var i = 0; i<aLi.length; i++) {
                    aLi[i].className = ‘‘;
                }

                iNow = iNow -1;
                if (iNow == -1) {
                    iNow = aLi.length - 1;
                }

                removeEvent(sInput, ‘keyup‘, getData);
                sInput.value = data.s[iNow];
                aLi[iNow].className = "active";
            }

            document.onkeyup = function() {
                //重新绑定事件
                addEvent(sInput, ‘keyup‘, getData);
            }

        }
        //无数据返回时候 ul内容置空并隐藏
    } else {
        oDataList.style.display = ‘none‘;
        oDataList.innerHTML = "";
    }
}

    5、按键的上下移动控制下拉提示列表。中间出了一个问题,困扰我好长时间。

     最开始,我给输入框一个键盘抬起事件,如果当前输入框的值改变,那么我去请求新数据。

     然后我实现键盘控制下拉提示列表,并同时把选中的下拉提示列表更新到输入框中。诡异的事情发生了,文本框的值只要一改变,立马请求新数据

  下拉提示列表重新被渲染,我去百度首页看百度的效果,上下按键控制更新到输入框的值并不会重新去请求数据。

     后来仔细分析找到原因了,因为焦点还在输入框里面,并且上下按键虽然是给document绑定的事件,但是盖不住事件捕捉啊。所以文本框的值也被改变了。

  鉴于此,我对文本框的按键抬起事件进行了绑定,当触发按键上下键(onkeydown事件)移动选中下拉提示的时候,移出文本框的绑定事件,当鼠标抬起的时候我又

  重新绑定事件,好机智有木有!

时间: 2024-11-03 22:00:42

百度搜索下拉提示框实现的相关文章

史上最全的搜索下拉提示用户交互研究——读《An Eye-tracking Study of User Interactions with Query Auto Completion》

        搜索下拉提示(Query Auto Completion,简称QAC)现在几乎是每个搜索引擎必备的基本功能,作用是在用户在搜索框输入查询词的过程中,给用户展示一系列搜索查询query供用户选择,可以方便用户输入.缩短用户搜索时间.提高用户搜索体验.在这方面的研究已经有很多,如基于上下文.基于时间序列等预测query的热度.个性化排序等,但关于用户如何与搜索下拉提示(下文简称QAC)交互的研究目前还是一个空白. 微软的Katja Hofmann前几天(11.3-11.7)刚刚填补了

百度搜索下拉框提示代码 opensug.js

opensug ·简单方式--方便的将"百度搜索框(带提示功能)"直接加入到您的网页中. 将以下代码加入到您的网页中,即可获得带有"搜索框提示"功能的百度搜索框. HTML代码: <form action="http://www.baidu.com/baidu" target="_blank"> <table bgcolor="#FFFFFF"><tr><td>

jquery 仿百度搜索下拉框的插件

转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出来的值 css 1 .select4_box { 2 border: 1px solid #5897fb; 3 position: absolute; 4 width: 250px; 5 background: #fff; 6 border-radius: 4px; 7 -webkit-box-sh

模糊匹配仿百度自动下拉提示

实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 <!DOCTYPE> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery

类似百度搜索的下拉提示框,复制别人的,改了一下。

jsp代码:在填写上级公司的input框时需要给客户提示已经保存过的相似公司名称,所以在下面加一个id为append的空的div. <div class="row cl"> <label class="form-label col-xs-4 col-sm-2" style="text-align: right;">上级公司:</label> <div class="formControls co

利用 lucene.net 实现高效率的 WildcardQuery ,记一次类似百度搜索下拉关键字联想功能的实现。

打开百度输入  站内搜索也要实现类似功能.最基础的做法,写个方法查数据库搜索历史综合表keywordSearch(先将被搜索过的关键字记录到一张表,记录好他们被搜索的次数.上次搜索的有多少结果) 大概一条sql语句:select keyword,searchCount,xxxx from table where keyword like '会计%' 当表 keywordSearch 记录很有几百上千万的时候,like显然不能及时响应了.但是这种关键字联想的一旦有延迟返回,那是很不好的体验.还没等

阿里云 OpenSearch 全文搜索下拉提示

class open_search_auto_downControl{ protected $access_key = "xxxxxxx"; protected $secret = "xxxxxxxxxxx"; protected $app_name = "agg"; protected $suggest_name = "agg"; protected $host = "http://opensearch-cn-ha

angular的跨域(angular百度下拉提示模拟)和angular选项卡

1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).success().error(); $http.jsonp(url,{params:{wd:'',cb:'JSON_CALLBACK'}}).success().error(); 注意jsonp中cb在angular中规定只能使用JSON_CALLBAC $watch(谁,做什么,false): 谁指

jQuery自动显示搜索下拉框

描述:当用选择查询时,根据输入的关键字动态从后台模糊查询,把结果异步显示在前端. jsp代码; <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% String