一、实现效果
二、核心知识点
1. node+express
实现提示功能接口
mysql
模拟数据:
mysql" />
接口测试:
路由:
javascript">const express = require('express')
const router = express.Router()
const routerHandler = require('../router_handler/search')
// 搜索框提示历史记录
router.get('/history/searchinfo', (req, res) => {
const sqlstr = 'select history from ev_history where history like ?'
let content = ["%" + req.query.searchVal + "%"];
// console.log(content);
db.query(sqlstr, content, (err, results) => {
if (err) return res.send(err)
// console.log(typeof(results));
res.send(results)
})
})
module.exports = router
入口函数app.js
javascript">const express = require('express')
const app = express()
const path = require('path')
// 配置跨域
const cors = require('cors')
app.use(cors())
// 导入搜索路由
const searchrouter = require('./router/search')
app.use('/', searchrouter)
app.use(express.static(path.resolve(__dirname, "./")));
app.listen(8089, () => {
console.log('services running at http://127.0.0.1:8089');
})
ajax_53">2. $.ajax调用接口
javascript"> // 获取历史记录函数
function gethistoryInfo(searchVal1) {
console.log(1);
$.ajax({
type: 'get',
url: 'http://127.0.0.1:8089/history/searchinfo',
data: {
searchVal: searchVal1,
},
success: (data) => {
//使用template模板
let html = template('historyinfo', {
list: data
})
$('.searchhistory ul').html(html)
}
})
3. template.js模块使用
引入文件
javascript">//引入js文件
<script src="./js/template-web.js"></script>
构建模板:
javascript"> <!-- 搜索模板 -->
<script id='historyinfo' type='text/html'>
<!-- 循环生成li列表 -->
{{each list}}
<li>{{$value.history}}</li>
{{/each}}
</script>
使用模板:
javascript"> let html = template('historyinfo', {
list: data
})
$('.searchhistory ul').html(html)
ajaxonblurli_108">4. 输入框触发oninput与onfocus事件执行ajax响应数据、onblur时隐藏提示栏并且清除标签li
这里有个知识点是onblur事件比onclick事件更早触发,onblur>onclick,所以将onblur加了一个延迟
javascript"> // 点击提示记录,更新input输入内容
$("#searchinput ul").on('click', 'li', function() {
console.log(1);
// console.log($(this).text());
let content = $(this).text();
$('#searchinput input').val(content)
})
$('#searchinput input').on({
'input focus': function() {
// console.log(1);
let searchVal = $(this).val();
// console.log(searchVal);
clearTimeout(timer)
// console.log(html);
if (searchVal.length === 0) {
$(".searchhistory").hide()
$('.searchhistory ul li').remove()
} else {
$(".searchhistory").show();
timer = setTimeout(() => { gethistoryInfo(searchVal) }, 500)
}
},
// 失去焦点
'blur': function() {
setTimeout(() => {
$(".searchhistory").hide()
// 移除li标签
$('.searchhistory ul li').remove()
}, 100);
}
})
5、防抖
每次输入都会发送请求,频率太高,这里做了一个防抖,每次触发oninput
与onfocus
事件使用延时发送请求:
javascript">//每次触发事件开始就清除一次计时器
clearTimeout(timer)
//延时500ms
timer = setTimeout(() => { gethistoryInfo(searchVal) }, 500)
总结:后端接口使用node+express制作,使用cors()做了跨域,使用mysql模拟数据,其实也可以用百度搜索提示的接口,前端使用ajax来响应数据,template.js模板渲染数据