监听input输入框变化,并获取结果展示在input输入框下面

 
        .search_content_list {width:374px;display: none;}
        .search_content_list ul{border:#ddd 1px solid;border-top:none;padding:5px}
        .search_content_list ul li{height:30px;line-height: 30px;clear:both;}
        .search_content_list ul li p{float:left;margin:0;padding:0;}
        .search_content_list ul li a{float:right;text-decoration:underline;}
 
    <div class="formControls" style="376px;position: absolute;left:calc(50% - 188px);top:calc(20% - 16px);">
        <span class="form-group">
            <input class="input-text size-L" type="text" name="keyword" id="keyword" placeholder="请输入单位关键词" style=" 374px;">
        </span>
        <div class="search_content_list">
            <ul id="search_ent_list"></ul>
        </div>
    </div>

重点在于下面的propertychange,这个方法是输入一个字就被监听一次

$(document).ready(function(){
    $("#keyword").bind('input propertychange', function () {
        $('.search_content_list').show();
        var keyword = $(this).val();
        $.ajax({
            type: "POST",
            url: '/company/ajax_search_content.php',
            data: {keyword:keyword},
            success: function(data){
                if(data.state == 'success'){
                    $('#search_ent_list').html('');
                    var list = data.data;
                    var count = list.length;
                    var html = '';
                    for(var i=0;i<count;i++){
                        html += '<li><p>'+list[i].ent_name+'</p><a href="/company/company_info.php?id='+list[i].id+'">查看</a></li>';
                    }
                    $('#search_ent_list').append(html);
                }
            }
        });
    });
});
 



原文地址:https://www.cnblogs.com/zhaoying/p/15531971.html