Question

即时为我的网站构建实时搜索功能，我遇到了一个问题。当我输入输入字段时，下面的脚本可以很好地将我的数据库中的结果导入页面但是在页面加载时没有显示，直到我搜索框

我的理想解决方案通过ajax加载页面上的内容然后我可以使用搜索字段缩小搜索范围

怎么做呢

这是我的搜索框

<input type='text' class='form-control' onkeyup='showResult(this.value)'>

这是结果在ajax请求的页面上显示的方式

<table class='table table-togglable table-hover'>
<thead>
    <tr>
        <th data-toggle='true'>SMS ID</th>
        <th data-hide='phone'>Time Stamp</th>
        <th data-hide='phone,tablet'>Mobile Number</th>
        <th data-hide='phone,tablet'>Message</th>
        <th data-hide='phone'>Message Status</th>
    </tr>
</thead>
<tbody  id='records_table'>
</tbody>
</table>

这是ajax脚本

<script>
function showResult(str) {  
$.ajax({
    url: "getjson.php?search="+str, 
    type: "GET",    
    dataType:"json",   
    success: function (response) 
    {
      var trHTML = '';
      $.each(response, function (key,value) {
         trHTML += 
            '<tr><td>' + value.ID + 
            '</td><td>' + value.Timestamp + 
            '</td><td>' + value.Number + 
            '</td><td>' + value.Message + 
            '</td><td>' + value.Status + 
            '</td></tr>';     
      });
        $('#records_table').html(trHTML);
    }   
});     
}
</script>

ajax实时搜索未显示页面加载数据

0 个答案: