要实现的 UI 功能
依赖文件：
jQuery /art-template 模板引擎 https://aui.github.io/art-template/实现步骤：
获取用户输入的 搜索关键字封装函数，用于发送 Ajax 请求利用 模板引擎 渲染 UI 结构获取用户输入的 搜索关键字
// 监听文本框的 keyup 事件$('#ipt').on('keyup', function() {// 获取用户输入的内容var key = $(this).val().trim()// 判断用户输入的内容是否为空if (key.length <= 0) {return}})
封装 getList 函数
function getList(key) {$.ajax({// 指定请求的 URL 地址，其中，q 是用户输入的关键字url: '/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()}// 搜索关键词为空时隐藏搜索建议列表$("#ipt").on("keyup", function() {clearTimeout(timer)let key = $(this).val().trim()if (key.length <= 0) {// 如果搜索关键字为空，则清空后隐藏列表return $("#suggest-list").empty().hide()}getList(key)})// 当搜索框失去焦点时也会清空隐藏列表$("#ipt").on("blur", function() {$("#suggest-list").empty().hide()})</script>
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tb</title><style>.container {display: flex;flex-direction: column;align-items: center;font-size: 12px;}.logo {width: 225px;height: 65px;margin: 50px 0;}.tabs {display: flex;}.tabs>div {width: 55px;height: 23px;line-height: 23px;text-align: center;cursor: pointer;}.tabs>div:hover {text-decoration: underline;color: #ff5700;}.tab-active {background-color: #ff5700;font-weight: bold;color: white;}.tabs>.tab-active:hover {color: white;text-decoration: none;}.search-box {display: flex;align-items: center;}.search-box .ipt {box-sizing: border-box;width: 500px;height: 34px;line-height: 30px;margin: 0;padding: 0;padding-left: 5px;outline: none;border: 2px solid #ff5700;}.btnSearch {margin: 0;height: 34px;border: none;background-color: #ff5700;color: white;letter-spacing: 1em;text-align: center;width: 90px;padding-bottom: 5px;outline: none;cursor: pointer;}.btnSearch:hover {opacity: 0.9;}#suggest-list {border: 1px solid #ccc;display: none;}.suggest-item {line-height: 30px;padding-left: 5px;}.suggest-item:hover {cursor: pointer;background-color: #eee;}</style></head><body><div class="container"><img src="./images/taobao_logo.png" alt="" class="logo" /><div class="box"><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></body><script src="/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="./lib/template-web.js"></script><!-- 模板结构 --><script type="text/html" id="tpl">{{each result}}<div class="suggest-item">{{$value[0]}}</div>{{/each}}</script><script>// 添加计时器var timer = null// 获取用户输入的搜索关键字$("#ipt").on("keyup", function() {clearTimeout(timer)let key = $(this).val().trim()if (key.length <= 0) {// 如果搜索关键字为空，则清空后隐藏列表return $("#suggest-list").empty().hide()}getList(key)})// 当搜索框失去焦点时也会清空隐藏列表$("#ipt").on("blur", function() {$("#suggest-list").empty().hide()})// 封装函数，发起请求function getList(key) {// 请求延时发送timer = setTimeout(() => {$.ajax({url: '/sug?q=' + key,dataType: 'jsonp',success: function(res) {readerList(res)}})}, 600);}// 封装函数，渲染模板结构function readerList(res) {// 如果没有需要渲染的数据，则直接退出if (res.result.length <= 0) {return $("#suggest-list").empty().hide()}// 渲染模板结构let htmlStr = template("tpl", res)$("#suggest-list").html(htmlStr).show()}</script></html>
