Живой поиск PHP Ajax в разбиении на страницы

Я пытаюсь реализовать live search в pagination. Я могу вставить статическую кнопку поиска, которая работает после нажатия Enter. Вместо этого я хочу реализовать кнопку поиска в реальном времени. Когда я пытаюсь использовать ajax, я не могу справиться, он испорчен.

Ниже приведен мой код разбивки на страницы и поиска. Как использовать живой поиск вместо статического поиска? Я новичок в аяксе. Или, пожалуйста, предоставьте ссылку на учебник, чтобы создать живой поиск в пагинации.

<?php   
    $search_keyword = '';
    if(!empty($_POST['search']['keyword'])) {
        $search_keyword = $_POST['search']['keyword'];
    }
    $sql = 'SELECT * FROM posts WHERE post_title LIKE :keyword OR description LIKE :keyword OR post_at LIKE :keyword ORDER BY id DESC ';

    /* Pagination Code starts */
    $per_page_html = '';
    $page = 1;
    $start=0;
    if(!empty($_POST["page"])) {
        $page = $_POST["page"];
        $start=($page-1) * ROW_PER_PAGE;
    }
    $limit=" limit " . $start . "," . ROW_PER_PAGE;
    $pagination_statement = $pdo_conn->prepare($sql);
    $pagination_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
    $pagination_statement->execute();

    $row_count = $pagination_statement->rowCount();
    if(!empty($row_count)){
        $per_page_html .= "<div style='text-align:center;margin:20px 0px;'>";
        $page_count=ceil($row_count/ROW_PER_PAGE);
        if($page_count>1) {
            for($i=1;$i<=$page_count;$i++){
                if($i==$page){
                    $per_page_html .= '<input type="submit" name="page" value="' . $i . '" class="btn-page current" />';
                } else {
                    $per_page_html .= '<input type="submit" name="page" value="' . $i . '" class="btn-page" />';
                }
            }
        }
        $per_page_html .= "</div>";
    }

    $query = $sql.$limit;
    $pdo_statement = $pdo_conn->prepare($query);
    $pdo_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
    $pdo_statement->execute();
    $result = $pdo_statement->fetchAll();
?>
<form name='frmSearch' action='' method='post'>
<div style='text-align:right;margin:20px 0px;'><input type='text' name='search[keyword]' value="<?php echo $search_keyword; ?>" id='keyword' maxlength='25'></div>
<table class='tbl-qa'>
  <thead>
    <tr>
      <th class='table-header' width='20%'>Title</th>
      <th class='table-header' width='40%'>Description</th>
      <th class='table-header' width='20%'>Date</th>
    </tr>
  </thead>
  <tbody id='table-body'>
    <?php
    if(!empty($result)) { 
        foreach($result as $row) {
    ?>
      <tr class='table-row'>
        <td><?php echo $row['post_title']; ?></td>
        <td><?php echo $row['description']; ?></td>
        <td><?php echo $row['post_at']; ?></td>
      </tr>
    <?php
        }
    }
    ?>
  </tbody>
</table>
<?php echo $per_page_html; ?>
</form>

php pagination ajax livesearch
person Dipak    schedule 18.05.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это первое, что я получил в результатах поиска Google после поиска live search pagination:

Ссылка на StackOverflow — разбиение на страницы с поиском в реальном времени.

Примечание. В этом методе используется jQuery, чтобы вы знали.

Как указал Акшай, все, что вам нужно, это окно поиска:

<input type='text' Id="search_box" name='search' placeholder='search' />

и ваш код JS следующим образом:

$(document).ready(function() {
  change_page('0');
});

function change_page(page_id) {
  //To get the field value
  var search_val = $("#search_box").val();
  $(".flash").show();
  $(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />');
  var dataString = 'page_id=' + page_id + '&search=' + search_val;
  $.ajax({
    type: "POST",
    url: "paging.php",
    data: dataString,
    cache: false,
    success: function(result) {
      $(".flash").hide();
      $("#page_data").html(result);
    }
  });
}

Все, что вам теперь нужно сделать, это выделить код PHP в отдельный файл .php и ссылаться на данные оттуда в параметре $.ajax url.

person Alex    schedule 18.05.2018
comment
Спасибо Человеку за эту идею - person Dipak; 18.05.2018
comment
Без проблем. Убедитесь, что вы сначала ищете, прежде чем публиковать, иногда вы можете найти что-то быстрее, чем вы думаете. :) - person Alex; 18.05.2018