node+express+jQuery+ajax+template+mysql制作搜索框提示功能

一、实现效果

二、核心知识点

1. node+express实现提示功能接口

mysql模拟数据：

接口测试：

路由：

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

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');
})

2. $.ajax调用接口

   // 获取历史记录函数
    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模块使用

引入文件

//引入js文件
  <script src="./js/template-web.js"></script>

构建模板：

   <!-- 搜索模板 -->
    <script id='historyinfo' type='text/html'>
        <!-- 循环生成li列表 -->
        {{each list}}
        <li>{{$value.history}}</li>
        {{/each}}
    </script>

使用模板：

         let html = template('historyinfo', {
                    list: data
                })

         $('.searchhistory ul').html(html)

4. 输入框触发oninput与onfocus事件执行ajax响应数据、onblur时隐藏提示栏并且清除标签li

这里有个知识点是onblur事件比onclick事件更早触发，onblur>onclick，所以将onblur加了一个延迟

  // 点击提示记录，更新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事件使用延时发送请求：

//每次触发事件开始就清除一次计时器
 clearTimeout(timer)

//延时500ms
timer = setTimeout(() => { gethistoryInfo(searchVal) }, 500)

总结：后端接口使用node+express制作，使用cors()做了跨域，使用mysql模拟数据，其实也可以用百度搜索提示的接口，前端使用ajax来响应数据，template.js模板渲染数据