仿 淘宝搜索栏，实现 用户输入搜索关键字时可以显示 搜索提示 的效果 Ajax

要实现的 UI 功能

依赖文件：

• jQuery https://jquery.com/
• art-template 模板引擎 https://aui.github.io/art-template/

实现步骤：

1. 获取用户输入的 搜索关键字
2. 封装函数，用于发送 Ajax 请求
3. 利用 模板引擎 渲染 UI 结构

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

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

封装 getList 函数

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

利用 模板引擎 渲染 UI 结构

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

<!-- 定义渲染模板结构的函数 -->
<script>
    // 渲染建议列表
 	function readerList(res) {
     
        // 如果没有需要渲染的数据，则直接退出
        if (res.result.length <= 0) {
     
            return $("#suggest-list").empty().hide()
        }
        // 渲染模板结构
        let htmlStr = template("tpl", res)
        $("#suggest-list").html(htmlStr).show()
    }
    
    // 搜索关键词为空时隐藏搜索建议列表