Ajax--------搜索框自动提示_ajax 搜索提示数据库版-CSDN博客

本文链接：https://blog.csdn.net/weixin_45976622/article/details/107842863

搜索框内容自动提示

步骤：

获取搜索框并未器添加用户输入事件
获取用户输入的关键字
向服务器端发送请求并携带关键字作为请求参数
客户端将响应数据显示在搜索框底部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索框输入文字自动提示</title>
    <style type="text/css">
        .container{
            padding-top: 150px;
        }
        .list-group{
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
            <ul class="list-group" id="list-box">
                
            </ul>
        </div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="tpl">
        {{each result}}
        <li class="list-group-item">{{$value}}</li>
        {{/each}}
    </script>
    <script>
        // 获取搜索框
        var searchInp=document.getElementById('search');
        // 获取提示文字的存放容器
        var listBox=document.getElementById('list-box');
        // 当用户在文本框中输入的时候触发
        searchInp.oninput=function(){
            // 获取用户输入的内容
            var key=this.value;
            // 向服务器端发送请求
            ajax({
                type:'get',
                url:'http://localhost:3000/searchAutoPromt',
                data:{
                    key:key
                },
                success:function(result){
                    // 使用模板引擎
                    var html = template('tpl',{result:result});
                    // 将拼接好的字符串显示在页面中
                    listBox.innerHTML = html;
                    // 显示ul容器
                    listBox.style.display='block';
                }
            })
        }
    </script>
</body>
</html>