1. 程式人生 > 其它 >監聽input輸入框變化,並獲取結果展示在input輸入框下面

監聽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="width: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="width: 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); } } }); }); });