根据输入的内容来展示联想词
展示结果:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2dc285efe1d600d8ce9690d6adaf4004.png)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="D:\MySpaces\VSCodeSpace\ajax\res\jquery.js"></script>
<!-- 导入模板引擎 -->
<script src="D:\MySpaces\VSCodeSpace\ajax\res\template-web.js"></script>
</head>
<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>
<body>
<div class="container">
<!-- Logo -->
<img src="D:\MySpaces\VSCodeSpace\ajax\res\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>
<!-- 模板结构 -->
<script type="text/html" id="tpl-suggestList">
{{each result}}
<!--搜索建议项-->
<div class="suggest-item">{{$value[0]}}</div>
{{/each}}
</script>
<script>
$(function () {
var timer = null
var cacheObj = {}
function debounceSearch(kw) {
timer = setTimeout(function () {
getSuggestList(kw)
}, 500)
}
$('#ipt').on('keyup', function () {
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)
}
})
}
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 k = $('#ipt').val().trim()
cacheObj[k] = res
}
})
</script>
</body>
</html>