淺析幾種網站搜索框的製做

時間 2019-11-11

標籤淺析幾種網站搜索製做欄目網站開發简体版

原文原文鏈接

若是本身作的網站內容太多，主要是網站導航欄的內容增多，當用戶想尋找一個本身須要的內容時，一個一個查找是一件很累的事情，若是在本身的網站上作一個搜索框，提供網站搜索功能，那就事半功倍了。 javascript

目前網站搜索框有三種。 php

一，支持HTML5語音API的語音識別文本框了<input x-webkit-speech /> css

即語音搜索框，如谷歌的網站以及淘寶網搜索框添加了語音搜索功能，雖然目前只有webkit內核瀏覽器支持，如Chrome 11+瀏覽器，可是相信隨着html的普及，絕大多數瀏覽器會支持此功能。圖： html

支持HTML5語音API的語音識別文本框 java

此時，對着音頻輸入設備（如耳麥）發出你那或妖嬈，或醇厚，或磁性的嗓音，啊~~ web

動畫效果：圖 chrome

固然還有一些其餘的參數，好比設置語音限制語言種類瀏覽器

代碼以下：動畫

還有設置語音輸入語法的參數，這個就比較試用於搜索框。加上這參數後，系統就會自動去掉「的」、「啦」這類無心義的字網站

還有一個onwebkitspeechchange的方法，發生在語言識別成功，且文字輸入到文本框後觸發。

我以爲全部網站全部的相似搜索的輸入框都讓他支持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，

新建一個搜索頁面，將它命名爲：searchform.php

2，用Dreamweaver cs6 打開searchform.php，將如下代碼複製到searchform.php中。

</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>
複製網站主題裏的archive.php頁面，改名爲search.php，才能實現搜索功能。
在須要顯示搜索框的頁面的位置放上搜索框調用代碼：
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
徹底以後，就能夠在本身作的網站中實現搜索功能了。
PHP網站搜索框打造完畢
end

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。