搜索框内容自动显示

Posted rainbowupdate

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了搜索框内容自动显示相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>搜索框输入文字自动提示</title>
    <link rel="stylesheet" href="./asset/bootstrap/dist/css/bootstrap.min.css">
    <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 search = document.querySelector("#search")
        var listBox = document.querySelector(‘#list-box‘)
        var timer = null
        search.oninput = function() {
            clearTimeout(timer)
            var key = this.value;
            if (key.trim().length == 0) {
                listBox.style.display = ‘none‘;
                return
            }
            timer = setTimeout(function() {
                ajax({
                    type: ‘get‘,
                    url: ‘http://localhost:3001/searchAutoPrompt‘,
                    data: {
                        key: key
                    },

                    success: function(result) {
                        var html = template("tpl", {
                            result: result
                        })
                        listBox.innerHTML = html
                        listBox.style.display = ‘block‘
                    },
                    error: function() {}
                })
            }, 800)


        }
    </script>
</body>

</html>

　　

以上是关于搜索框内容自动显示的主要内容，如果未能解决你的问题，请参考以下文章

搜索框内容自动显示

利用selenium自动化实现搜索框输入内容

自动完成文本框在单击文本框时不显示结果

MFC中在指定的文档搜索 输入框中的指定内容并显示到指定的文本框中的按钮代码该怎么写啊？在线等

如何在WordPress菜单中添加搜索框？

div里面的内容在div框外面显示是怎么回事