PHP Ajax两次返回HTML

Question

I have a PHP/Ajax function that returns a list of countries with the given characters in a textbox. Ofcourse Ajax updates this list everytime the textbox gets edited.

Index.PHP calls all the other files, classes and HTML. But when the textbox gets updated, Ajax sends a POST variable to index.PHP because this is where the Search.PHP file with the class name SearchEngine gets called. But because he sends this to the index.php everything keeps getting reloaded and the HTML will be returned twice.

Index.php

<?php
require_once("cgi_bin/connection.php");
require_once("Database_Handler.Class.php");
require_once("HTML_Page.Class.php");
require_once("search.php");

$hostname_conn = "localhost";
$database_conn = "ajax";
$username_conn = "root";
$password_conn = "";

$db = new DatabaseHandler();
$conn = $db->openConnection($hostname_conn, $username_conn, $password_conn, $database_conn);

$IndexPage = new page();
echo $IndexPage->render();
$SearchEngine = new SearchEngine($conn); 
?>

Please ignore the poor and unsecure database connection. I am currently transforming all my code to PDO and refining it but that is for later.

Search.PHP

<?php
class SearchEngine{

    private $html;

    public function __construct($conn){

        $this->html = '<li class="result">
                            <h3>NameReplace</h3>
                            <a target="_blank" href="ULRReplace"></a>
                        </li>';

        if (isset($_POST["query"])) {
            $search_string = $_POST['query'];
        }

        //$search_string = mysql_real_escape_string($search_string);

        if (strlen($search_string) >= 1 && $search_string !== ' ') {

            $query = 'SELECT * FROM country WHERE name LIKE "%' . $search_string . '%"';
            $result = $conn->prepare($query);
            $result->execute();
            $result_array = $result->fetchAll();

                foreach ($result_array as $result) {
                    $display_name = preg_replace("/" . $search_string . "/i", "<b>" . $search_string . "</b>", $result['name']);
                    $display_url = 'sadf';

                    $output = str_replace('NameReplace', $display_name, $this->html);
                    $output = str_replace('ULRReplace', $display_url, $output);
                    echo($output);
                }
        }
    }

}
?>

And as final the Javascript

$(document).ready(function() {

function search() {
    var query_value = $('input#search').val();
    $('b#search-string').html(query_value);

    if(query_value !== ''){
        $.ajax({
            type: "POST",
            url: "index.php", //Referring to index.php because this is where the class SearchEngine is called
            data: { query: query_value },
            cache: false,
            success: function(html){
                $("ul#results").html(html);
            }
        });
    }

    return false;
}

$("input#search").keyup(function() {
    clearTimeout($.data(this, 'timer'));
    var search_string = $(this).val();

    if (search_string == '') {
        $("ul#results").fadeOut();
        $('h4#results-text').fadeOut();
    }

    else {
        $("ul#results").fadeIn();
        $('h4#results-text').fadeIn();
        $(this).data('timer', setTimeout(search, 100));
    };
});
});

note: HTML is being returned from the "page" class called inside Index.php

How do i not let everything get called twice?

Thank you,

EDIT: A new file was suggested where i direct the ajax url to AutoComplete.php

AutoComplete.PHP

Please explain what should be in the file and why. I am clueless.

Answer 1

Basically, just add a parameter to your Ajax call to tell the index.php its being called by Ajax, and then wrap an if-statement around the two lines that print out your actual index page:

if(!isset($_REQUEST['calledByAjax']))
{
  $IndexPage = new page();
  echo $IndexPage->render();
}

and in your Ajax call:

data: { query: query_value, calledByAjax: 'true'  },

Or make another php page, like ajaxsearch.php that's the same as your index.php but lacking those two lines, and call that in your Ajax call.

Answer 2

First thing (this is a sample, not tested yet)

autocomplete.php

<?php
$search_string = $_POST['query'];

$query = 'SELECT * FROM country WHERE name LIKE "%' . $search_string . '%"';
$result = $conn->prepare($query);
$result->execute();
$result_array = $result->fetchAll();

foreach ($result_array as $result) {
    $display_name = preg_replace("/" . $search_string . "/i", "<b>" . $search_string . "</b>", $result['name']);
    $display_url = 'sadf';

    $output = str_replace('NameReplace', $display_name, $this->html);
    $output = str_replace('ULRReplace', $display_url, $output);
 }

echo($output);
?>

autocomplete.js

function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);

if(query_value !== ''){
    $.ajax({
        type: "POST",
        url: "autocomplete.php", //Here change the script for a separated file
        data: { query: query_value },
        cache: false,
        success: function(html){
            $("ul#results").html(html);
        }
    });
}

return false;
}

$("input#search").keyup(function() {
    clearTimeout($.data(this, 'timer'));
    var search_string = $(this).val();

    if (search_string == '') {
        $("ul#results").fadeOut();
        $('h4#results-text').fadeOut();
    } else {
        $("ul#results").fadeIn();
        $('h4#results-text').fadeIn();
        search(); // call the function without setTimeout 
    }
  });
 });

Have luck :)