監聽input輸入框變化,並獲取結果展示在input輸入框下面
阿新 • • 發佈:2021-11-10
.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); } } }); }); });