文档章节

浅析几种网站搜索框的制作

crossmix
 crossmix
发布于 2015/12/13 22:40
字数 1046
阅读 230
收藏 5
点赞 0
评论 0

    如果自己做的网站内容太多,主要是网站导航栏的内容增多,当用户想寻找一个自己需要的内容时,一个一个查找是一件很累的事情,如果在自己的网站上做一个搜索框,提供网站搜索功能,那就事半功倍了。

    目前网站搜索框有三种。

 一,支持HTML5语音API的语音识别文本框了<input x-webkit-speech />

   即语音搜索框,如谷歌的网站以及淘宝网搜索框添加了语音搜索功能,虽然目前只有webkit内核浏览器支持,如Chrome 11+浏览器,但是相信随着html的普及,绝大多数浏览器会支持此功能。图:

   

<input />

支持HTML5语音API的语音识别文本框

<input x-webkit-speech />


此时,对着音频输入设备(如耳麦)发出你那或妖娆,或醇厚,或磁性的嗓音,啊~~

动画效果:图

当然还有一些其他的参数,比如设置语音限制语言种类

代码如下:

<input x-webkit-speech lang="zh-CN" />

还有设置语音输入语法的参数,这个就比较试用于搜索框。加上这参数后,系统就会自动去掉“的”、“啦”这类无意义的字

<input x-webkit-speech x-webkit-grammar="bUIltin:search" />
还有一个onwebkitspeechchange的方法,发生在语言识别成功,且文字输入到文本框后触发。
<input x-webkit-speech x-webkit-grammar="bUIltin:search" />

我觉得所有网站所有的类似搜索的输入框都让他支持HTML5语言识别!

HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框:

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>请使用支持HTML5的chrome浏览器体验语音搜索效果。|www.xin126.cn</title>
<style type="text/css">
 .search_form{position:relative; height:31px; margin:60px;display:inline-block;} 
 .search_form:hover{-webkit-box-shadow:0 0 3px #999;-moz-box-shadow:0 0 3px #999}
 .sinput{float:left; width:200px; height:21px; line-height:21px; padding:4px 7px; color:b3b3b3;  border:1px solid #999; border-radius:2px 0 0 2px; background-color:#fbfbfb;} 
 .sbtn{
  float:left; 
  width:50px; 
  height:31px;
  padding:0 12px;
  margin-left:-1px; border-radius:0 2px 2px 0; border:1px solid #4d90fe; background-color:#4d90fe; cursor:pointer;  display:inline-block; font-size:12px; vertical-align:middle; color:#f3f7fc;position:absolute;} 
 .sbtn:hover{background:#4084f2} 
</style>
</head>
<body>
<form action="#" method="get" class="search_form">     <input type="text" name="s" class="sinput" placeholder="输入 回车搜索" autofocus x-webkit-speech>      <input type="submit" value="搜索" class="sbtn"> </form> 
</body>
</html>
二,简单的网页搜索框

   打开Dreamweaver cs6,首先,我们打开自己建了一半的网页或者是新建一个页面,个人建议用HTML5。图

然后,我们开始编写代码。搜索框要有输入框和搜索按钮两部分组成,我用的都是input


我们会在input框的外面再套一个标签,我是仿照百度搜索的样子,在input的外面套了一个span标签,在最外层套了一个form表单


我们的第一个input框是用来输入文字的,其type类型应该是text,第二个是搜索的,我用的type类型是submit(提交),


这样一个基本的搜索框就做好了,我们可以再调整一下框的高度和宽度,以及整体的位置,使得这个搜索框更加美观大方。


这种搜索框是简单的。

三,动态网站搜索框,语言ASP,PHP网站为主。

以PHP网站为主,打开Dreamweaver cs6,

  1. 新建一个搜索页面,将它命名为:searchform.php
2,用Dreamweaver cs6 打开searchform.php,将以下代码复制到searchform.php中。

<form method="get" id="searchform"  action="<?php bloginfo('url'); ?>/">   <input type="text" value="输入关键字" name="s" id="s"/>  <input type="submit" value="搜 索"  onClick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" alt="Search"  />

  1. </form>  
    <script type="text/javascript">
            $(document).ready(function(){
                    // 当鼠标聚焦在搜索框
                    $('#s').focus(
                            function() {
                                    if($(this).val() == '输入关键字') {
                                            $(this).val('').css({color:"#454545"});
                                    }
                            }
                    // 当鼠标在搜索框失去焦点
                    ).blur(
                            function(){
                                    if($(this).val() == '') {
                                            $(this).val('输入关键字').css({color:"#333333"});
                                    }
                            }
                    );
            });
    </script>
  2. 复制网站主题里的archive.php页面,更名为search.php,才能实现搜索功能。
  3. 在需要显示搜索框的页面的位置放上搜索框调用代码:
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
  4. 完全之后,就可以在自己做的网站中实现搜索功能了。
  5. PHP网站搜索框打造完毕
  6. end

  

© 著作权归作者所有

共有 人打赏支持
crossmix
粉丝 65
博文 305
码字总数 645711
作品 0
广州
高级程序员
[百度SEM竞价学习之二]——百度搜索推广概述

百度简介 从2000年开始,百度作为免费网页搜索服务提供者,凭借先进的技术和对中文的深刻理解,创造了非凡的搜索体验,提供了海量的信息服务,倍受中文网民青睐,在中国的搜索份额逐年攀升。...

霞女
2016/06/20
28
0
浅析cookie和session

关于cookie和session的区别: 通常意义上的cookie指的是利用客户端的技术在计算机用户的文件夹下存储的文件,又名硬盘cookie,一般来说是有上限的。我的cookie是存在D:Documents and Setting...

Mr_Qi
2012/08/27
0
0
joomla首页模板如何只显示文章标题列表

如题,目前自己正在创建自己的网站系统,但是遇到几个问题一直都想不通, 1:在模板中如何才能制作类似网站最新文章列表,不出现搜索框。 2:如果要使网站文章内容页与首页样式不一样有什么办法...

诸葛非卿
2014/02/20
1K
2
搜索意图三分法:用户搜索行为及其意图浅析

搜索行为目前已经成为每个上网的人的基本需求,但是用户的搜索行为是怎样一个过程?隐藏在用户查询背后的搜索意图是什么?这都是需要站长、营销人员仔细研究的领域,只有这样才能提供更好的用户...

刀心
2015/06/10
0
0
浅析ASP网站后台设计

现在学习ASP语言很少啦,逐渐被PHP,asp.net,jsp所代替。 这里介绍ASP网站后台设计技巧 1.用户名规则: 字符大于4, 不能在黑名单里(比如不能跟管理员有重名,不能有任何包含本站域名的相...

crossmix
2015/10/08
71
0
WEB前端工程师-练成

一、HTML和CSS基础 1.1 开发工具 1.1.1 前端开发工具技巧介绍-DW篇 1.1.2 前端开发工具技巧介绍-Sublime篇 1.2 HTML和CSS基础课程 1.2.1 HTML+CSS基础课程 1.3 网页布局 1.3.1 如何用CSS进行...

霞女
2015/12/02
62
0
10大用户体验技巧!

本文由Mockplus(摹客)团队翻译,仅供学习交流。 UX(即用户体验)是通过提高用户与设计界面交互的可访问性,可用性以及效率来提升用户满意度的方法。转换率和用户体验是紧密结合的,因此,...

jongde
01/22
0
0
5大PPT幻灯片制作技巧,肯定有你不会的!

对于职场人员来说,制作PPT可能是经常需要进行的工作,那么对于PPT幻灯片的制作,大家有什么自己觉得非常棒的技巧呢?小编今天先来给大家分享几个,你们看看会不会。 快速浏览幻灯片 在制作P...

梗集_5ec8
07/05
0
0
【京东商城首页实战6】制作搜索框

接下来做第二部分:搜索框,即图1蓝色边框部分。 图1 HTML: css代码: 效果1: 粉色背景部分是文本框和按钮的父亲盒子。 效果2: 文本框有个2px的边框,所以如果从白色地方测量button的宽度...

sinat_34647836
2017/05/02
0
0
分享10款漂亮实用的CSS3按钮

昨天向大家介绍了一些精美的菜单《分享简单而实用的网页菜单导航》。这次主要给大家分享10款风格各异的CSS3按钮,如果你希望你的页面也能有很炫的样式,那么我相信这10款CSS3按钮就非常适合你...

tp_wire
2012/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python以太坊类库web3.py概览

python通过web3.py库与以太坊交互共同入口是web3对象。web3对象提供API接口,python开发应用与以太坊进行交互如钱包创建、支付、转账等连接JSON-RPC服务器进行。 Providers提供者 Providers使...

智能合约
4分钟前
0
0
【Android学习笔记】设置App启动页

先将启动页放到项目资源中,图片一般是1080*1920的jpg。 新建一个activity,如图: 创建成功之后,打开刚刚创建的activity,来进行代码的编写: >>>阅读全文

全部原谅
5分钟前
0
0
什么是React-redux、为什么使用React-redux、怎么使用React-redux

1、什么是React-redux React-redux是用于连接React和Redux的 2、为什么使用React-redux 使用React-redux可以使redux部分代码更简洁更明了,比如组建中需要使用到的数据都在mapStateToProps方...

kimyeongnam
8分钟前
0
0
Spring核心——Stereotype组件与Bean扫描

在注解自动装载中介绍了通过注解(Annotation)自动向Bean中注入其他Bean的方法,本篇将介绍通过注解(Annotation)向容器添加Bean的方法。 Spring的核心容器提供了@Component和@Bean注解来标...

随风溜达的向日葵
8分钟前
0
0
利用世界杯,读懂 Python 装饰器

Python 装饰器是在面试过程高频被问到的问题,装饰器也是一个非常好用的特性, 熟练掌握装饰器会让你的编程思路更加宽广,程序也更加 pythonic。 今天就结合最近的世界杯带大家理解下装饰器。...

猫咪编程
12分钟前
0
0
flink fold example

flink fold例子 import org.apache.flink.api.common.functions.*;import org.apache.flink.streaming.api.datastream.DataStream;import org.apache.flink.streaming.api.environment.S......

coord
13分钟前
0
0
c++ qt 组播总结

每个人都有不同的认知规律和习惯, 有的人喜欢搞一套严密的大理论, 论述起来滔滔不绝, 不管自己懂不懂, 反正读者/听者是没搞懂。 有的人喜欢从实践出发, 没看到代码, 不运行一下, 不看...

backtrackx
17分钟前
0
0
Sublime text2安装json格式化插件SublimePrettyJson[Windows]

一、下载SublimePrettyJson插件包 https://github.com/dzhibas/SublimePrettyJson 二、将下载的文件解压放到在package目录下面 C:\Users\lucky\AppData\Roaming\Sublime Text 3\Packages 每个......

lazy~
17分钟前
0
0
安装vue-cli 报4058错误

1. 4058是网络代理错误。 安装淘宝源修改一下就可以了: npm --registry https://registry.npm.taobao.org info underscore 改为cnpm执行: cnpm install --global vue-cli 安装成功: 试试版...

MrBoyce
18分钟前
0
0
CPU飙升分析

1、top -----看具体的进程 2、top -H -p pid ------该进程的线程 3、printf 0x%x 15248 ------将线程改为16进制 4、jstack 进程...

北极之北
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部