如何制作一个必应（百度）搜索框？

代码如下：

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

margin:0;padding:0;list-style: none;text-decoration: none;

}

body{

background: #ccc;

}

#container{

background-image: url(backgroundImage.jpg);width: 1613px;height: 700px;margin:0 auto;

}

#logo{

float: left;margin:-5px 5px 0 0;

}

form{

background: white;float: left;

}

#search-input{

outline:none;width:500px;height: 50px;line-height: 50px;float: left;border:0;

}

#search-button{

background-image: url(search.jpg);background-repeat: no-repeat;width:40px;height: 30px;float: left;border:0;margin:8px;

}

#wrapper{

position: absolute;top:200px; left: 300px;

}

</style>

<div id="container">

<div id="wrapper">

<div id="logo"> <img src="必应.png" alt="tupian" id="logo"> </div>

<form action="https://cn.bing.com/search" target="_self" method="get">

<input type="text" id="search-input" name="q" placeholder="请输入要搜索的内容：" autofocus="">

<input type="submit" id="search-button" value="">

</form>

</div>

　　这样便可以得到如下界面：

当然这里最重要的是form表单了，其中action的值是什么呢？

在input中怎么设置name呢？我们可以在必应搜索中随便搜索一些东西，比如搜索，可以看到：

于是，我们在action中输入https://cn.bing.com/search

　　　　　将第一个input的name设置为“q”即可。

　　　　　值得注意的是：在提交按钮中的type要设置为submit即可自动实现搜索而不需要使用javascript代码。

同样的，如果我们需要使用百度，即需要在百度中搜索任意内容：

于是，我们需要将action的值设置为https://www.baidu.com/s 将第一个input的name值设置为wd即可。

注：我们也可以使用js原生的方法 focus()使其获得焦点。

　　如： document.querySelector("input").focus() 那么第一个input元素就自动获取焦点了。

时间： 2024-07-28 15:48:34

如何制作一个必应（百度）搜索框？的相关文章

制作一个类似于百度搜索的事件代码

下面这页代码是我制作的一个简单的类似于百度主页搜索的事件. 主要事件是在文本框上输入关键字,下面会有一个div显示出来你模糊关键字的数据. 并且点击下面的数据,数据会直接跳到文本框中. 还有鼠标放上变色的一个小事件. 有兴趣的可以看一下. <script src="jquery-1.11.2.min.js"> </script> <style type="text/css"> *{ margin:0px; auto; paddin

模拟百度搜索框，输入时显示历史记录

今天写了个小demo,利用本地存储的特点,模拟百度搜索框. 主要知识是利用本地存储的特点,模拟百度搜索时的历史记录显示. 主要HTML代码为 <div class="search"> <input type="text"/> <button class="btn">搜索</button> </div> <ul class="hidden"> <li&

模拟百度搜索框

在使用百度搜索是,页面会根据我们输入的内容自动匹配一些候选内容. 实现的主要过程主要是: 1.用户在输入一个字符结束后,在onkeyup事件中获取用户输入的内容. 2.根据获取到的内容向服务器发送请求,匹配到相似的数据,存到数组中. 3.判断数组是否有内容,如果有数据,就在搜索框下面遍历匹配到的内容(候选项). 首先,要写好页面布局 html部分 <html> <head> <meta http-equiv="Content-Type" content=&

上课笔记_使用DWR实现自动补全类似百度搜索框的自动显示效果

使用DWR实现自动补全自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择在日常上网过程中,我们经常使用搜索引擎,当我们输入想要检索的关键字时,搜索引擎会提示我们相关的关键字训练要点: 掌握使用DWR框架开发Ajax程序使用MyEclipse 10.0 + MySql5.0 新建数据库:可以手动随便新建一个测试用的 DROP TABLE IF EXISTS `books`; CREATE TABLE `

原生JS模拟百度搜索框

近期有个新入行的小伙伴一直在问一些基础知识,突然觉得人的记忆力有限,有些平常很少用到的知识点虽简单却也其实很容易模糊,或者是一个单词,或者是一个语法.所以想着应该利用一下工作之余的碎片时间,记录一些工作上的问题和一些有趣的小案例,于是开通了播客,一方面便于自己日后翻阅,一方面给刚学习的小伙伴一个参考. 今天先写一个简单的小案例:原生JS模拟百度搜索框. 需求: 1.当在输入框输入时,每输入一个文字,就会在下方展示相关内容列表 2.每一次输入框输入,清空上一次内容 3.鼠标移入列表内容时,对应的内

在页面中嵌入百度搜索框

呈现效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在页面中嵌入百度搜索框</title> <style> form { width: 500px; height: 50px; padding: 10px 20px 20px; text-align: center; line-height: 50px;

“百度搜索框提示”代码

使用方法: 百度提供了2种自定义调用的方法方法一: 第一步为需要添加“百度搜索框提示”功能的<input>标签添加baiduSug属性.例如:<input type=”text” name=”word” baiduSug=”1|2″>当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作:当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作. 第二步在网页中引入Javascript文件: <script charset=

站长工具|百度搜索框提示功能

百度向站长开放免费“百度搜索框”代码和“百度搜索框提示”代码.只需进行简单的设置, 即可将“ 百度搜索框( 带提示功能)”功能快速加入到您的网页中.提升用户在网站中的搜索体验. 根据不同类型的网站需求,站长工具一共提供三种引入方式供您选择: 简单方式——方便的将“百度搜索框(带提示功能)”直接加入到您的网页中.将以下代码加入到您的网页中,即可获得带有“搜索框提示”功能的百度搜索框 HTML代码: <form action=”http://www.baidu.com/baidu” target=”

百度搜索框提示

方法一: 第一步为需要添加“百度搜索框提示”功能的<input>标签添加baiduSug属性.例如:<input type=”text” name=”word” baiduSug=”1|2″> 当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作: 当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作. 第二步在网页中引入Javascript文件:<script charset=”gbk” src=”http://www.baidu.co

React实现百度搜索框

import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/dist/css/bootstrap.min.css' // import PropTypes from 'prop-types'; import JSONP from 'jsonp' //封装jonsp为promise对象 function jsonp(url,opts={}) { return ne