通過這個案例，我們了解一些知識，比如模版引擎、防抖和節流

先來看看效果圖：

功能：當用戶輸入關鍵字后，對應的陣列建議羅列出來

先來看看html框架

   <div class="container">
        <!-- Logo -->
        <img src="./images/taobao_logo.png" alt="" class="logo" />

        <div class="box">
            <!-- tab 欄 -->
            <div class="tabs">
                <div class="tab-active">寶貝</div>
                <div>店鋪</div>
            </div>
            <!-- 搜索區域（搜索框和搜索按鈕） -->
            <div class="search-box">
                <input id="ipt" type="text" class="ipt" placeholder="請輸入要搜索的內容" /><button class="btnSearch">
                    搜索
                </button>
            </div>
            <!-- 搜索建議串列 -->
            <div id="suggest-list"></div>
        </div>
    </div>

首先為輸入框系結keyup事件

獲取用戶輸入的內容 $(this).val().trim()，對文本框里面的內容進行判斷，如果文本框里面沒有內容 就把建議串列清空并隱藏

          $('#ipt').on('keyup', function () {
                var keywords = $(this).val().trim()
                if (keywords.length <= 0) {
                    return $('#suggest-list').empty().hide()
                }

                getSuggestList(keywords)
            })

接下來封裝一個getSuggestList函式，發送一個JSONP請求，獲取到對應的建議串列 有個q屬性 kw就是我們輸入的關鍵字

          function getSuggestList(kw) {
                $.ajax({
                    url: 'https://suggest.taobao.com/sug?q=' + kw,
                    dataType: 'jsonp',
                    success: function (res) {
                        console.log(res)
                    }
                })
            }

將每一條建議渲染到頁面中【定義模版結構】在定義模版引擎前，先給大家介紹哈什么是模版引擎

模版引擎

概念：模版引擎，顧名思義，它可以根據程式員指定的模版結構和資料，自動生成一個完整的html頁面

執行程序：程式員提供資料和模版結構傳給模版引擎 模版引擎在內部將兩者做成一個完成的html結構

好處：

• 減少了字串拼接
• 代碼更加清晰
• 使代碼更易于閱讀和維護

在本案例中，我使用的模版引擎是art-template

使用步驟：

1. 匯入 art-template
2. 定義資料
3. 定義模版
4. 呼叫template函式【有兩個引數 資料和模版】
5. 渲染html結構

art-template標準語法

art-template提供{{}}這種語法格式，在{{}}內可以進行變數輸出，或回圈陣列等操作，這種{{}}語法在art-template中被稱為標準語法

• 標準語法-輸出

在{{}}語法中，可以進行變數的輸出、物件屬性的輸出、三元運算式輸出、邏輯或輸出、加減乘除等運算式輸出

比如---------{{value}} || {{obj.key}} || {{obj['key']}} || {{a?b:c}} || {{a || b}} || {{a+b}}

• 標準語法-原文輸出

語法：{{ @value}}

如果要輸出的value值中，包含了html標簽結構，則需要使用原文輸出語法，才能保證html標簽被正常渲染

• 標準語法-條件輸出

如果要實作條件輸出，則可以在{{}}中使用if...else if .../if的方式，進行按需輸出

{{if value}} 按需輸出內容 {{/if}}
{if v1}} 按需輸出的內容 {{else if v2}} 按需輸出的內容{{/if}}

• 標準語法-回圈輸出

語法：
{{each arr}}
{{$index}} {{$value}}
{{/each}}

如果要實作回圈輸出，則可以在{{}} 內，通過each語法回圈陣列，當前回圈的索引使用$index進行訪問

• 標準語法-過濾函式

{{value} | filterName}} 左邊是一個值，右邊是一個處理函式，回傳一個新值 相當于呼叫過濾器函式

定義過濾器的基本語法：
template.defaults.imports.filterName = function(value){ return處理的結果 }

再回到案例當中，現在需要實作將建議內容渲染到頁面中

使用模版引擎里面的回圈輸出，去回圈result里面的每一項，沒回圈一次就創建一個div，資料是 {{$value[0]}} 每一個陣列鍵的第一個值

<!-- 搜索建議串列 -->
<div id="suggest-list"></div>

//模版結構 回圈服務器回傳的資料 去回圈result里面的每一項，
<script type="text/html" id="tpl-suggestList">
     {{each result}}
       <div class="suggest-item">{{$value[0]}}</div>
     {{/each}}
</script>

定義渲染模版結構的函式

先判斷里面有沒有要渲染的資料，沒有的話講建議串列 清空并隱藏，

如果有

var htmlStr = template('tpl-suggestList', res) 呼叫模版引擎函式
$('#suggest-list').html(htmlStr).show() 將處理好的資料渲染到建議串列，并將此顯示

          // 渲染UI結構
            function renderSuggestList(res) {
                if (res.result.length <= 0) {
                    return $('#suggest-list').empty().hide()
                }
                var htmlStr = template('tpl-suggestList', res)
                $('#suggest-list').html(htmlStr).show()

            }

細節問題一：當用戶輸入內容的時候，每輸入一個字母，就會服務器就會請求一次資料，請求的次數很多

解決方案：通過防抖，有效減少請求的次數，節約請求資源

實作輸出框的防抖

var timer = null //1、防抖動的timer

function debounceSearch(keywords) { //2、定義防抖的函式

timer = setTimerout(function() {

// 發起JSONP請求

getSuggestList(keywords)

},500)

$("#ipt").on('keyup',function(){ // 3、在觸發keyup事件時，立即清空timer

clearTimeout(timer)

....

debounceSearch(keywords)

)

在500毫秒以內，清除定時器 ，服務器就不會發起請求

細節問題二：當我們輸入 apple 后 在輸入一個mac，如果我們值保留appla的搜索的時候，服務器又會重新請求一次， 重復請求了

解決方案：將我們之前的搜索建議進行快取，再發起相同的請求的時候，就去尋找快取里面的建議，提高了搜索效率

// 定義全域快取物件
 var cacheObj = {}
// 1. 獲取到用戶輸入的內容，當做鍵
 var k = $('#ipt').val().trim()
// 2. 需要將資料作為值，進行快取
  cacheObj[k] = res

優先從快取中取資料，在發起請求之前，先判斷快取里有沒有這個鍵

在keyup事件后面進行一次判斷

 //先判斷快取中是否有資料
  if (cacheObj[keywords]) {
      return renderSuggestList(cacheObj[keywords])
 }
  debounceSearch(keywords)

js完整代碼

<script>
        $(function () {
            // 1. 定義延時器的Id
            var timer = null
            // 定義全域快取物件
            var cacheObj = {}

            // 2. 定義防抖的函式
            function debounceSearch(kw) {
                timer = setTimeout(function () {
                    getSuggestList(kw)
                }, 500)
            }

            // 為輸入框系結 keyup 事件
            $('#ipt').on('keyup', function () {
                // 3. 清空 timer
                clearTimeout(timer)
                var keywords = $(this).val().trim()
                if (keywords.length <= 0) {
                    return $('#suggest-list').empty().hide()
                }

                // 先判斷快取中是否有資料
                if (cacheObj[keywords]) {
                    return renderSuggestList(cacheObj[keywords])
                }
                debounceSearch(keywords)
            })

            function getSuggestList(kw) {
                $.ajax({
                    url: 'https://suggest.taobao.com/sug?q=' + kw,
                    dataType: 'jsonp',
                    success: function (res) {
                        renderSuggestList(res)
                    }
                })
            }

            // 渲染UI結構
            function renderSuggestList(res) {
                if (res.result.length <= 0) {
                    return $('#suggest-list').empty().hide()
                }
                var htmlStr = template('tpl-suggestList', res)
                $('#suggest-list').html(htmlStr).show()

                // 1. 獲取到用戶輸入的內容，當做鍵
                var k = $('#ipt').val().trim()
                // 2. 需要將資料作為值，進行快取
                cacheObj[k] = res
            }
        })
    </script>