zoukankan      html  css  js  c++  java
  • 监听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);
                    }
                }
            });
        });
    });
     



  • 相关阅读:
    PostgreSQL在何处处理 sql查询之三十四
    PostgreSQL在何处处理 sql查询之三十八
    PostgreSQL在何处处理 sql查询之三十五
    网站设计必知的65条原则
    网站CI形象的定位
    五句话定会改变你的人生
    网站申明要注意!
    发个不要数据库的论坛
    关于猴子拿桃子的问题
    企业建站的几个误区!
  • 原文地址:https://www.cnblogs.com/zhaoying/p/15531971.html
Copyright © 2011-2022 走看看