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

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

{{each result}}{{$value[0]}}

3. 定义渲染模板结构的函数

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

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

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

 美化

#suggest-list{border: 1px solid #ccc;display: none;
}
.suggest-item{line-height: 30px;padding-left: 5px;
}
.suggest-item:hover{cursor: pointer;background-color: #ccc ;
}

输入框的防抖

1. 什么是防抖

防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

就是英雄回城就是延迟几秒，而中间如果打断了， 那么就要重新计时

就是在调用回调函数时，保证只执行一次，提高浏览器的性能

2. 防抖的应用场景

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；

不防抖，每输入一个字母就执行一次

 3. 实现输入框的防抖

var timer = null                    // 1. 防抖动的 timerfunction debounceSearch(keywords) { // 2. 定义防抖的函数timer = setTimeout(function() {// 发起 JSONP 请求getSuggestList(keywords)}, 500)}$('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timerclearTimeout(timer)// ...省略其他代码debounceSearch(keywords)})

上次按键盘并没有到500ms 上次的直接清空了 然后下面重新开延迟器 到了500ms就是最后一次输入 能保证只输入一次

  缓存搜索的建议列表

1. 定义全局缓存对象

// 缓存对象var cacheObj = {}

2. 将搜索结果保存到缓存对象中

// 渲染建议列表function renderSuggestList(res) {// ...省略其他代码// 将搜索的结果，添加到缓存对象中var k = $('#ipt').val().trim()cacheObj[k] = res}

3. 优先从缓存中获取搜索建议

// 监听文本框的 keyup 事件$('#ipt').on('keyup', function() {// ...省略其他代码// 优先从缓存中获取搜索建议if (cacheObj[keywords]) {return renderSuggestList(cacheObj[keywords])}// 获取搜索建议列表debounceSearch(keywords)})

宝贝
店铺
搜索