继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

实现百度搜索功能(难度初级)

张焕标33
关注TA
已关注
手记 5
粉丝 7
获赞 43
搜索功能教程

点击体验完成后的效果
点击进入码云查看

目录
01 基本页面制作
02 下拉提示框制作
03 下拉框的显示和隐藏
04 配置本地服务环境
05 实现百度搜索智能提示功能
06 点击提示关键字,跳转到搜索页面
07 点击百度一下,跳转到搜索页面

01基本页面制作

一 、html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="网站搜索功能实现 百度搜索 实现百度搜索">
    <title>搜索功能</title>
</head>
<body>
    <div id="search-box">
        <div id="logo"></div>
        <div id="search-form">
            <input type="text"  id="search-input">
            <button id="search-botton">百度一下</button>
        </div>
    </div>
</body>
</html>

二 、css:

#search-box {
    width: 641px;
    margin: 0 auto;
}
#search-form {
    font-size: 0px;
}
#logo {
    width: 270px;
    height: 129px;
    background-image: url('./bd_logo1.png');
    background-size: cover;
    margin: 0 auto;
}
#search-input {
    width: 521px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    padding: 9px 7px;
    border: 1px solid #b8b8b8;
}
#search-botton {
    width: 104px;
    height: 40px;
    border: 1px solid #38f;
    border-bottom: 1px solid #2e7ae5;
    background-color: #38f;
    color: #fff;
    font-size: 18px;
    position: relative;
    top: 2px;
    cursor: pointer;
}

#search-botton:hover {
    background-color: #377ad8;
}

三 、百度logo图片: 点击查看

02下拉提示框制作

一 、在#search-box中添加下拉框的html代码

<div id="search-box">
    ...
    <div id="suggestions">
        <ul>
            <li>suggestion1</li>
            <li>suggestion2</li>
        </ul>
    </div>
</div>

二 、 #search-box做相对定位

#search-box {
    width: 641px;
    margin: 0 auto;
    position: relative;
}

三 、#suggestion的样式

#suggestions {
    width: 535px;
    border: 1px solid #d8d8d8;
    position: absolute;
}

#suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#suggestions li {
    font-size: 16px;
    height: 20px;
    line-height: 20px;
    padding: 3px 7px;
    cursor: pointer;
    background-color: #fff;
}

#suggestions li:hover {
    background-color: #f8f8f8;
}
03下拉框的显示和隐藏

一 、 去除body的默认margin,设置#suggestion样式为display: none

body {
    margin: 0;
}
#suggestions {
    width: 535px;
    border: 1px solid #d8d8d8;
    position: absolute;
    display: none;
}

二 、引入jQuery1.10.2,并编写下拉框提示框的显示也隐藏代码:

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
var searchInput = $('#search-input') //搜索输入框
var suggestions = $('#suggestions') //下拉提示框
var searchForm = $('#search-form') //搜索表单

// 输入搜索内容,显示下拉框
searchInput.on('keyup', function() {
    // 下拉框的精准定位
    suggestions.show().css({
        top: searchForm.offset().top + searchForm.height(),
        left: 0
    })
})

// 点击其他区域 下拉框隐藏
$(document).click(function() {
    suggestions.hide()
})
04配置本地服务环境

说明:使用ajax,需要服务器环境,下面我们先来配置一下本地的服务环境

一、打开host, 配置本地虚拟域名

  • window7为例,host目录为:C:\Windows\System32\drivers\etc
  • 配置虚拟域名
        127.0.0.1       forapi.cn

二、 配置本地服务环境, 可以是WAMPphpStudy等,这里以phpStudy为例

  • 下载phpStudy, 点击进入下载页面, 下载后安装,可以一路下一步
  • 以我电脑的安装路径为例:目录为C:\phpStudy\PHPTutorial\Apache\conf, 打开,httpd.conf 文件,去掉LoadModule vhost_alias_module modules/mod_vhost_alias.so前边的#

  • 配置apache域名映射,目录:C:\phpStudy\PHPTutorial\Apache\conf\extra,打开httpd-vhosts.conf,添加以下内容:
<VirtualHost *:80>
 DocumentRoot "C:\Users\Administrator\Desktop\LearnFree\baiduSearch" //虚拟域名映射的本地路径
 ServerName forapi.cn //虚拟域名
</VirtualHost>
<Directory "C:\Users\Administrator\Desktop\LearnFree\baiduSearch"> //同上
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
  • 开启phpStudy本地服务环境, 然后访问网址forapi.cn,就可以通过域名来访问我们的静态页面了


05实现百度搜索智能提示功能

一、获取提示jsonp数据的地址为:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=?&json=1&p=3&sid=20144_1467_19033_20515_18240_17949_20388_20456_18133_17001_15202_11615&req=2&csor=2&pwd=s&cb=jQuery110207612423721154653_1467355506619&_=1467355506623

其中参数wd为我们输入的关键字,此时为?; 参数cbjson数据的回到函数,此时为jQuery110207612423721154653_1467355506619

二、 根据上面的地址,我们就可以使用ajax获取jsonp数据,并进行渲染了

var searchInput = $('#search-input') //搜索输入框
var suggestions = $('#suggestions') //下拉提示框
var searchForm = $('#search-form') //搜索表单
var suggestionWrap = $('#suggestion-wrap') //提示信息的容器

// 输入搜索内容,显示智能提示下拉框
searchInput.on('keyup', function () {
    // 输入的内容
    var text = $(this).val()
    // 智能提示数据jsonp的请求地址
    var _url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + text + '&json=1&p=3&sid=20144_1467_19033_20515_18240_17949_20388_20456_18133_17001_15202_11615&req=2&csor=2&pwd=s&cb=jQuery110207612423721154653_1467355506619&_=1467355506623'

    // ajax根据输入的内容,获取jsonp数据,并渲染到提示下拉框
    $.ajax({
        url: _url,
        type: 'GET',
        dataType: 'jsonp', //指定服务器返回的数据类型
        jsonpCallback: 'jQuery110207612423721154653_1467355506619',
        success: function (data) {
            var data = data.s
            var lis = data.reduce(function (result, item) {
                return result += '<li>' + item + '</li>'
            }, '')
            suggestionWrap.html(lis)

            // 下拉提示框精准定位
            suggestions.show().css({
                top: searchForm.offset().top + searchForm.height(),
                left: 0
            })
        }
    })
})

三、实现后的效果(输入关键字,显示关键字相关的下拉列表信息)

06点击提示关键字,跳转到搜索页面

一、搜索页面网址格式:
https://www.baidu.com/s?wd=?

二、代码实现:

//为suggestionWrap,绑定事件委托,点击suggestionWrap下的li,进行搜索页面跳转
suggestionWrap.on('click', 'li', function() {
    var text = $(this).html()
    window.location.href = 'https://www.baidu.com/s?wd=' + text
})
07点击百度一下,跳转到搜索页面
// 点击百度一下,跳转到搜索页面
var searchBotton = $('#search-botton')
searchBotton.click(function() {
    var text = $.trim(searchInput.val())
    if(text) {
        window.location.href = 'https://www.baidu.com/s?wd=' + text
    }
})
打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP