0

もう一度、私は困惑しています。mysql db を検索するための小さな検索フィールドとボタンがあります。別の結果ページをリロードまたはロードするのではなく、現在のページに結果を追加したい。

スクリプトは次のとおりです。

<script>
$(function() {

$(".search_button").click(function() {
    // getting the value that user typed
    var searchString    = $("#search_box").val();
    // forming the queryString
    var data            = 'search='+ searchString;
    //var data = searchString;

    // if searchString is not empty
    if(searchString) {
        // ajax call
        $.ajax({
            console.log(data);
            type: "POST",
            url: "do_search.php",
            data: data,
            beforeSend: function(html) { // this happens before actual call
                $("#results").html(''); 
                $("#searchresults").show();
                $(".word").html(searchString);
           },
           success: function(html){ // this happens after we get results
                $("#results").show();
                $("#results").append(html);
          }
        });    
    }
    return false;
});

});
</script>

ul タグ内に追加されることになっている元のページは次のとおりです。

<div id="SEARCH2" class="panel">
<div style="margin:20px auto; text-align: center;">
<form method="post" action="do_search.php">
    <input type="text" name="search" id="search_box" class='search_box'/>
    <input type="submit" value="Search" class="search_button" /><br />
</form>
</div>      
<div>

<div id="searchresults">Search results :</div>
<ul id="results" class="update">
</ul>

</div>
</div>

そして、ul タグ内に HTML を挿入することになっている do_search.php を次に示します。

<?php

if (isset($_POST['search'])) {

include('db.php');

$word = mysql_real_escape_string($_POST['search']);
$word = htmlentities($word);

$sql = "SELECT id, last_name, first_name, u_name, skype_id, primary_location, phone, status FROM users WHERE (last_name LIKE '%" . $word . "%' OR
first_name LIKE '%" . $word . "%' OR u_name LIKE '%" . $word . "%' OR skype_id LIKE '%" . $word . "%' OR phone LIKE '%" . $word . "%') ORDER BY last_name";

$fetched = mysql_query($sql)or die('query error'.mysql_error());
$end_result = '';
if($fetched){
    while($row = MySQL_fetch_array($fetched)):
          //TEST TO SEE IF THIS WORKS
        $result         = $row['id'];
        // we will use this to bold the search word in result
        $bold           = '<span class="found">' . $word . '</span>';    
        $end_result     .= '<li>' . str_ireplace($word, $bold, $result) . '</li>';            
    endwhile;
    echo $end_result;
}
else{
    echo '<li>No results found</li>';
}    
}
//echo 'crap2';
?>
4

1 に答える 1

1

console.log(data);AJAX 呼び出しから を削除します。そして、常に追加している場合は、$("#results").html('');から削除しますbeforeSend:

$.ajax({
    type: "POST",
    url: "do_search.php",
    data: data,
    beforeSend: function(html) { // this happens before actual call
        $("#results").html(''); 
        $("#searchresults").show();
        $(".word").html(searchString);
   },
   success: function(html){ // this happens after we get results
        $("#results").show();
        $("#results").append(html);
  }
});
于 2013-10-25T12:19:32.750 に答える