web學(xué)習(xí)筆記13-移動(dòng)端搜索框提示功能

MRZYD 發(fā)布于2019-08-02 14:00 / 1978人閱讀

摘要：當(dāng)按鈕被松開(kāi)時(shí)，觸發(fā)事件獲取到關(guān)鍵字判斷關(guān)鍵字是否為空若輸入字符串不為空則顯示網(wǎng)絡(luò)請(qǐng)求搜索。顯示自動(dòng)提示框，給框里填關(guān)聯(lián)詞條的內(nèi)容給緩存對(duì)象賦值若輸入字符串為空則顯示歷史搜索。

????最近項(xiàng)目一直在迭代更新，沒(méi)有什么新的東西做，所以拿出來(lái)一個(gè)搜索的小模塊分享下，功能就是輸入關(guān)鍵字能出來(lái)相關(guān)字的聯(lián)想吧，刪除一些字的時(shí)候順帶可以保存上一段的聯(lián)想，從外觀上來(lái)看，效果還罷了，這里分享給大家，可以供大家看看。

????效果圖如下，github鏈接在此search_demo

按照老規(guī)矩，下面就直接寫(xiě)編寫(xiě)過(guò)程了

第一步：創(chuàng)建文件

????創(chuàng)建相應(yīng)的html，js，css文件，引入jquery。

第二步：引入文件，設(shè)置meta，編寫(xiě)html以及樣式

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: 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;
}
.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;
    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:#ffffd;
    border-bottom:1px solid #ffffd;
    -webkit-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:scaleY(.4);
    transform:scaleY(.4)
}

????當(dāng)然了，這里面的樣式格局什么的在自己實(shí)際項(xiàng)目中需要根據(jù)自己的項(xiàng)目來(lái)調(diào)整，不需要跟我這寫(xiě)的一樣，重要的是邏輯部分。

第三步：編寫(xiě)js邏輯

????一般情況下，我們?cè)谶M(jìn)入搜索頁(yè)面的時(shí)候，大多數(shù)會(huì)出現(xiàn)歷史搜索，也就是搜索記錄，我們首先需要的就是進(jìn)行歷史搜索的渲染，我這里歷史搜索都是用localStorage進(jìn)行存儲(chǔ)，大家根據(jù)需要可以進(jìn)行對(duì)應(yīng)的存儲(chǔ)或者獲取。

var history_search = [];//存儲(chǔ)歷史搜索數(shù)據(jù)

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

????接下來(lái)在獲取了歷史記錄的前提下，我們要把歷史記錄渲染到頁(yè)面上


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

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

????接下來(lái)需要做的處理就是在輸入關(guān)鍵字的時(shí)候，一些請(qǐng)求和緩存搜索出來(lái)的提示數(shù)據(jù)

var obj_arr = [];//請(qǐng)求結(jié)果
var timeout = 0;
var keyName = "";//搜索關(guān)鍵字
var ajaxCache = {};//定義緩存對(duì)象(保存請(qǐng)求出來(lái)的數(shù)據(jù))

????這里我先把另外兩個(gè)方法先提出來(lái)先寫(xiě)了，一個(gè)是渲染頁(yè)面的方法，一個(gè)是判斷字符串是否為空的方法，這兩個(gè)方法在接下來(lái)的邏輯中需要調(diào)用。

//渲染頁(yè)面方法
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 = ""+obj[i]+"";
        $(".search_find_line").append(search_res);
    }
}

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

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

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

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

????這就基本完成了，這里沒(méi)有加一個(gè)搜索結(jié)果頁(yè)，在出現(xiàn)提示搜索的時(shí)候，應(yīng)該在上添加點(diǎn)擊事件，以跳轉(zhuǎn)到搜索結(jié)果頁(yè)之類(lèi)的，這邊可以根據(jù)自己的需求來(lái)處理。

云服務(wù)器 GPU云服務(wù)器搜索框提示 js搜索提示框 php搜索框智能提示移動(dòng)端web

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/53499.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

MRZYD

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

[黑五]TmhHost充值送10%,日本CN2上線(xiàn)季付200元起,彈性云主機(jī)上線(xiàn)全場(chǎng)8折

閱讀 3081·2021-11-24 10:47
#萬(wàn)圣節(jié)#SugarHosts：虛擬主機(jī)續(xù)費(fèi)送8折優(yōu)惠碼，云服務(wù)器每續(xù)費(fèi)一年送半年

閱讀 3831·2021-11-02 14:43
印象云：21.7元/月/1GB內(nèi)存/40GB SSD空間/800GB流量/50Mbps端口/KVM/

閱讀 2228·2021-09-26 10:15
超全的App 測(cè)試工具大全，收藏這篇就夠了【附帶官網(wǎng)|GitHub地址】

閱讀 2253·2021-09-08 09:35
JavaScript “跑馬燈”抽獎(jiǎng)活動(dòng)代碼解析與優(yōu)化（一）

閱讀 560·2019-08-30 12:45
原型模式故事鏈(2)--原型鏈的四大理論

閱讀 2781·2019-08-29 17:04
MVC/MVVM 是什么？

閱讀 3214·2019-08-26 14:05
選擇文本為其添加類(lèi)名

閱讀 1259·2019-08-26 12:10

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

web學(xué)習(xí)筆記13-移動(dòng)端搜索框提示功能

相關(guān)文章