超简单Js实现自定义搜索框搭建百度搜索引擎

浅浅的花香味﹌ 2021-12-12 16:19 534阅读 0赞

效果图  
![在这里插入图片描述][20190712150708464.gif]  
目的：  
看到有很多导航网站，里面有各种搜索功能，比如百度，360…如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]  
就想知道他们是怎么跳转的，于是便手动撸起了代码

##### 代码如下 #####

简单易懂,直接新建一个html复制粘贴就可以啦~喜欢别忘记点收藏哦

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>导航</title>
    </head>
    <body>
        百度<input id="searchInput" type="text"> <button onclick="to()">搜索</button>
            
        </button>
    </body>
    <script>
        function to(){
            var searchValue = document.getElementById("searchInput").value;
            // alert(searchValue);
           window.location.href="http://www.baidu.com/s?ie=UTF-8&wd="+searchValue;
        }
    </script>
    </html>

[20190712150708464.gif]: /images/20211210/32f20f89c6794190a046baf4a12fecc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]: /images/20211210/667ba0d5d2cf4230a26a36f95544ca22.png

发表评论取消回复

表情：

评论列表（有 0 条评论，534人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现百度搜索框提示（跨域）

效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

末蓝、/ 2023年10月10日 10:04/ 0 赞/ 90 阅读

相关 vue实现百度搜索历史下拉框

![在这里插入图片描述][20191231150838603.png] <template> <div class="for-search">

矫情吗；*/ 2023年06月26日 10:48/ 0 赞/ 62 阅读

相关 qt自定义搜索框（超简单，带效果图）

1. 什么也不要说，先上效果图： ![Center][] 2. 代码头文件： ifndef APPSEARCHLINE_H define APP

电玩女神/ 2022年08月20日 11:11/ 0 赞/ 283 阅读

相关 android简单自定义搜索框

搜索功能类： public class SearchBuilder { private LinearLayout search_bar;

谁借莪１个温暖的怀抱￠/ 2022年07月13日 11:08/ 0 赞/ 252 阅读

相关 jQuery实现百度搜索框

最近项目需求，写了一个类似百度搜索框的功能。把代码整理了一遍，然后分享出来给大家看看，如果有不对的地方请多指教。实现效果![70][] 使用的语言：html，css,

忘是亡心i/ 2022年05月18日 10:40/ 0 赞/ 425 阅读

相关百度搜索框

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <tit

旧城等待，/ 2022年05月06日 03:58/ 0 赞/ 430 阅读

相关 js--搜索框提示仿百度

大概要实现的内容这是一个很简单的示例，服务器端只是用了一个jsp页面，返回的类型为xml。先讲下是怎么回事，就是在浏览器端，通过ajax请求，发送一串英文字母，服务

客官°小女子只卖身不卖艺/ 2022年04月17日 04:19/ 0 赞/ 379 阅读

相关 js实现模拟百度搜索

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2021年12月17日 11:33/ 0 赞/ 431 阅读

相关超简单Js实现自定义搜索框搭建百度搜索引擎

效果图 ![在这里插入图片描述][20190712150708464.gif] 目的：看到有很多导航网站，里面有各种搜索功能，比如百度，360…如图 ![在这

浅浅的花香味﹌/ 2021年12月12日 16:19/ 0 赞/ 535 阅读

相关百度搜索框提示功能简单实现

效果图如下: ![20151201172134130][] 在搜索框中输入的时候会有百度的智能提示。代码也很简单，整个html只有24行，关键的代码不超过10行。

缺乏、安全感/ 2021年06月10日 20:41/ 0 赞/ 748 阅读