要实现的UI效果

image.png

获取用户输入的搜索关键词

为了获取到用户每次按下键盘输入的内容，需要监听输入框的 keyup 事件，示例代码如下：

// 监听文本框的 keyup 事件
$('#ipt').on('keyup', function() {
     // 获取用户输入的内容
     var keywords = $(this).val().trim()
     // 判断用户输入的内容是否为空
     if (keywords.length <= 0) {
     return
     }
     // TODO：获取搜索建议列表
})

封装getSuggestList函数

将获取搜索建议列表的代码，封装到 getSuggestList 函数中，示例代码如下：

function getSuggestList(kw) {
     $.ajax({
     // 指定请求的 URL 地址，其中，q 是用户输入的关键字
     url: 'https://suggest.taobao.com/sug?q=' + kw,
     // 指定要发起的是 JSONP 请求
     dataType: 'jsonp',
     // 成功的回调函数
     success: function(res) { console.log(res) }
     })
 }

渲染建议列表的UI结构

定义搜索建议列表

 <div class="box">
     <!-- tab 栏区域 -->
     <div class="tabs"></div>
     <!-- 搜索区域 -->
     <div class="search-box"></div>
     <!-- 搜索建议列表 -->
     <div id="suggest-list"></div>
 </div>

定义模板结构

• 创建script标签
• 设置type属性为 text/html 设置模板id
• 利用 each 遍历结构

<!-- 模板结构 -->
<script type="text/html" id="tpl-suggestList">
     {{each result}}
     <div class="suggest-item">{{$value[0]}}</div>
     {{/each}}
</script>

定义渲染模板结构的函数

• 定义函数，接收一个参数，就是服务器返回的数据
• 判断返回的数据长度是否大于0
• 如果没有，将页面的列表清空，并且进行隐藏
• 如果有数据，调用模板的 template 函数，传入id和数据
• 返回渲染好的html字符串，然后放入容器中

 // 渲染建议列表
function renderSuggestList(res) {
     // 如果没有需要渲染的数据，则直接 return
     if (res.result.length <= 0) {
     return $('#suggest-list').empty().hide()
     }
     // 渲染模板结构
     var htmlStr = template('tpl-suggestList', res)
     $('#suggest-list').html(htmlStr).show()
}

搜索关键词为空时隐藏搜索建议列表

• 注册keyup事件
• 判断输入框的内容是否为空
• 如果为空隐藏列表

$('#ipt').on('keyup', function() {
     // 获取用户输入的内容
     var keywords = $(this).val().trim()
     // 判断用户输入的内容是否为空
     if (keywords.length <= 0) {
     // 如果关键词为空，则清空后隐藏搜索建议列表
     return $('#suggest-list').empty().hide()
     }
     getSuggestList(keywords)
})