JQuery模糊查询实现查询银行id名并且点击查询到的信息替换到input输入框框

一、HTML代码

<div class="test">
        <input class="search" type="text" placeholder="输入关键字查询信息">
        <div class="search_box">
            <div class="search_text">工商银行</div>
            <div class="search_text">中国银行</div>
            <div class="search_text">建设银行</div>
            <div class="search_text">中国平安银行</div>
            <div class="search_text">华夏信用卡</div>
            <div class="search_text">民生银行</div>
            <div class="search_text">众泰银行</div>
            <div class="search_text">浦发信用卡</div>
            <div class="search_text">农业银行</div>
            <div class="search_text">秦皇岛银行</div>
            <div class="search_text">国家开发银行</div>
            <div class="search_text">平安信用卡</div>

            <div class="search_text">中信银行</div>
            <div class="search_text">民生银行</div>
            <div class="search_text">鄂尔多斯银行</div>
            <div class="search_text">长治银行</div>
            <div class="search_text">进出口银行</div>
            <div class="search_text">农业发展银行</div>
            <div class="search_text">信阳银行</div>
            <div class="search_text">广州银行</div>
            <div class="search_text">瑞士银行</div>
            <div class="search_text">加拿大丰业银行</div>
            <div class="search_text">瑞士信贷银行</div>
            <div class="search_text">南洋商业银行</div>

            <div class="search_text">海南银行</div>
            <div class="search_text">苏州银行</div>
            <div class="search_text">深圳发展银行</div>
            <div class="search_text">浦发银行</div>
            <div class="search_text">广东发展银行</div>
            <div class="search_text">邮政储蓄</div>
            <div class="search_text">光大银行</div>
            <div class="search_text">招商银行</div>
            <div class="search_text">中华</div>
        </div>
    </div>

 

二、CSS代码

* {
        margin: 0;
        padding: 0;
    }
    
    .test {
        width: 500px;
        height: 460px;
        margin: 50px auto;
        text-align: center;
    }
    
    .search {
        width: 300px;
        height: 40px;
        background-color: transparent;
        padding-left: 10px;
        border-radius: 5px;
    }
    
    .search_box {
        margin-top: 15px;
        width: 100%;
        height: 100%;
        border: 1px solid gray;
        border-radius: 5px;
    }
    
    .search_text {
        width: 100px;
        height: 20px;
        line-height: 20px;
        border: 1px solid darkgoldenrod;
        border-radius: 10px;
        text-align: center;
        float: left;
        margin: 10px;
        font-size: 13px;
    }

 

三、JS代码

$(function() {
            $('.search').on('keyup', function() {
                var serval = $('.search').val()
                if (serval == '') {
                    $('.search_box').show();
                }
                //:contains()选择器选取包含指定字符串的元素,:not()选择器选取除了指定元素以外的所有元素,trim()去除空格
                $('.search_text:contains(' + serval.trim() + ')').show();
                $('.search_text:not(:contains(' + serval.trim() + '))').hide();
                console.log(123)
                console.log(serval)
            });
            $('.search_text').bind('click', function() {
                var serTextval = $(this).text();
                $('.search').val(serTextval)
                console.log(serTextval)
            })

        })

四、再写之前不要忘了导入jQuery的库哟