web學習筆記13-移動端搜索框提示功能

????最近項目一直在迭代更新，說忙也不算忙，說不忙也還挺忙的，沒有什么新的東西做，所以拿出來一個搜索的小模塊分享下，功能就是輸入關鍵字能出來相關字的聯想吧，刪除一些字的時候順帶可以保存上一段的聯想，從外觀上來看，效果還罷了，這里分享給大家，可以供大家看看。最近也在初步學習nodejs的基礎，雖然之前寫過node相關的，但是現在再看這些，感覺有點懵。不過這些以后再寫文說吧。

????搜索功能效果圖如下，github鏈接在此search_demo

9月-05-2017 16-32-02.gif

按照老規矩，下面就直接寫編寫過程了

第一步：創建文件

????創建相應的html，js，css文件，引入jquery。

圖片.png

第二步：引入文件，設置meta，編寫html以及樣式

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--通用媒體查詢-->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="search.css">
    <title>搜索</title>
</head>
<body>
<div class="search_nav">
    <input type="search" class="search_input searchProduct" placeholder="查找您需要的商品">
    <div class="search_cancel">取消</div>
</div>
<div class="search_find">
    <div class="search_history">
        歷史搜索
    </div>
    <div class="search_find_line">
       <!--搜索結果和搜索歷史-->
    </div>
</div>

<script src="jquery.js"></script>
<script src="search.js" type="application/javascript"></script>
</body>
</html>

css:


*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #f5f5f9;
}
.search_nav{
    width: 100%;
    height: 45px;
    position: fixed;
    top:0;
    left: 0;
    background-color: #20232b;
}
.search_input{
    float: left;
    width: 75%;
    height: 35px;
    margin-left: 30px;
    margin-top: 5px;
    font-size: 15px;
    text-indent: 30px;
    /*border: none;*/
    border: 1px solid black;
    border-radius: 40px;
    outline: none;
}
input::-webkit-search-cancel-button {display: none;}
.search_cancel{
    float: right;
    width: 15%;
    height: 100%;
    color:white;
    text-align: center;
    line-height: 45px;
    /*background-color: lightblue;*/
}
.search_find{
    background:#fff;
    line-height:42px;
    margin-top: 45px;
}
.search_history{
    padding-left:10px;
    font-weight:700;
    font-size:16px
}
.search_find_title{
    display:block;
    /*margin-top: 45px;*/
    position:relative;
    padding-left:15px;
    padding-right:10px;
    font-size:14px;
    color:#8a8a8a;
    width:100%;
    box-sizing:border-box
}
.search_find_title:after{
    content:'';
    position:absolute;
    top:0;
    left:15px;
    box-sizing:border-box;
    width:92%;
    height:1px;
    color:#ddd;
    border-bottom:1px solid #ddd;
    -webkit-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:scaleY(.4);
    transform:scaleY(.4)
}

????當然了，這里面的樣式格局什么的在自己實際項目中需要根據自己的項目來調整，不需要跟我這寫的一樣，重要的是邏輯部分。

第三步：編寫js邏輯

????一般情況下，我們在進入搜索頁面的時候，大多數會出現歷史搜索，也就是搜索記錄，我們首先需要的就是進行歷史搜索的渲染，我這里歷史搜索都是用localStorage進行存儲，大家根據需要可以進行對應的存儲或者獲取。

var history_search = [];//存儲歷史搜索數據

//獲取歷史搜索數據,若沒有則為空
if(localStorage.getItem("history_search")){
    history_search = JSON.parse(localStorage.getItem("history_search"));//獲取歷史搜索數據
}else{
    history_search = [];
}

????接下來在獲取了歷史記錄的前提下，我們要把歷史記錄渲染到頁面上

//渲染歷史記錄
function setpage(){
    var product_list = '';
    //動態添加元素至頁面上
    if(history_search.length != 0){
        $(".search_history").show();
        if(history_search.length >= 10){
            for(var i = 0; i < 10 ;i++){
                product_list = '<a class="search_find_title">'+history_search[i]+'</a>';
                $(".search_find_line").append(product_list);
            }
        }else{
            for(var i = 0; i < history_search.length;i++){
                product_list = '<a class="search_find_title">'+history_search[i]+'</a>';
                $(".search_find_line").append(product_list);
            }
        }
    }else{
        $(".search_history").hide();
    }
}
setpage();

????這里我們需要注意的是，一般的歷史記錄不會是太多的，一般會顯示前十條最近搜索的，我這邊在渲染的時候做了截取，其實在存的時候就應該去做判斷，在超出10條或者規定條數的時候我們只保存十條或者規定條數，然后在渲染的時候就不需要再去截取了。

????接下來需要做的處理就是在輸入關鍵字的時候，一些請求和緩存搜索出來的提示數據

var obj_arr = [];//請求結果
var timeout = 0;
var keyName = '';//搜索關鍵字
var ajaxCache = {};//定義緩存對象(保存請求出來的數據)

????這里我先把另外兩個方法先提出來先寫了，一個是渲染頁面的方法，一個是判斷字符串是否為空的方法，這兩個方法在接下來的邏輯中需要調用。

//渲染頁面方法
function setListPage(obj,no){
    console.log(obj);
    console.log(no);
    ajaxCache = {};
    obj_arr = obj;
    $(".search_find_line").empty();
    if(no == 1){
        $(".search_history").hide();
    }else{
        $(".search_history").show();
    }

    var search_res = '';
    for(var i = 0; i < obj.length;i++){
        search_res = '<a class="search_find_title">'+obj[i]+'</a>';
        $(".search_find_line").append(search_res);
    }
}

//判斷字符串是不是為空
function isNull( str ){
    if ( str == "" ) return true;
    var regu = "^[ ]+$";
    var re = new RegExp(regu);
    return re.test(str);
}

????這里就是最重要的一部分了。

//當按鈕被松開時，觸發事件
$('.searchProduct').keyup(function(evt){
//獲取到關鍵字
    keyName = $(this).val();
//判斷關鍵字是否為空
    if(isNull(keyName) == false || keyName != ''){
        //若輸入字符串不為空,則顯示網絡請求搜索。
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            if(!!ajaxCache[keyName]){
                //顯示自動提示框，給框里填關聯詞條的內容
                setListPage(ajaxCache[keyName],1);
                ajaxCache = {};
            }else{
                var sendData = {
                    "keyName":keyName
                };

                $.ajax({
                    type: "POST",
                    url: url,//我們自個的接口沒法公開，大家可以用自己的。
                    data:JSON.stringify(sendData),
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        if(data){
                            if(data.data){
                                //顯示自動提示框，給框里填關聯詞條的內容
                                ajaxCache[keyName]=[];
                                ajaxCache[keyName]=data.data;//給緩存對象賦值
                                setListPage(data.data,1);
                            }
                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            }
        },200);
    }else{
        //若輸入字符串為空,則顯示歷史搜索。
        ajaxCache = {};
        if(history_search.length == 0){
            //若數組為空,歷史搜索不顯示
            $(".search_history").hide();
        }else{
            $(".search_history").show();
            setListPage(history_search,2)
        }
    }
//手機端按下右下角的搜索按鈕的時候觸發事件
   if (evt.keyCode == 13) {
        localStorage.setItem('search_keyName',keyName);
        var count = 0;
        //判斷歷史搜索中是否已經存在當前搜索的關鍵字
        for(var j = 0; j < history_search.length;j++){
            if(keyName == history_search[j]){
                count += 1;
            }else{
                count += 0;
            }
        }
        //如果沒有,則添加進歷史搜索
        if(count == 0){
            history_search.unshift(keyName);
        }
        //這邊缺少的處理是歷史搜索排序的問題。
        localStorage.setItem("history_search",JSON.stringify(history_search));
        window.location.href="";//跳轉到搜索結果頁之類的頁面
    }

????這就基本完成了，這里沒有加一個搜索結果頁，在出現提示搜索的時候，應該在<a class="search_find_title"></a>上添加點擊事件，以跳轉到搜索結果頁之類的，這邊可以根據自己的需求來處理。
????這上面的流程基本上就能編寫出移動端搜索功能，要是有什么問題可以留言探討。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,264評論 25贊 708
  • 最近由于工作需要，調研學習各類產品的搜索功能，于是準備做個筆記和大家分享，也督促自己總結抽象。 首先思考一個問題，...
    兔子的產品實驗田閱讀 7,681評論 11贊 70
  • 寫在前面 無論網站或是App，搜索功能幾乎成了標配，在其間占據著或輕或重的位置。一方面，搜索可以幫助用戶節約時間、...
    vivijia閱讀 1,681評論 0贊 33
  • 當我們擁有一個想法的時候，總認為其他的人和我們想象的一樣，并沒有考察過市場的實際需要，完全是主觀的猜測。如果真的有...
    殘劍閱讀 270評論 0贊 1
  • 春節前，各方企業早早開始營銷活動預熱，力圖在猴年春晚期間一較高低，紅包之戰一觸即發。 另辟蹊徑 瞄準春節營銷切入角...
    喻拓閱讀 745評論 0贊 50