如何从ajax实时搜索中获取HTML文本框的值？

Question

I have already completed the live search part. I want to put the value of the search result into a textbox in a different php file.

AJAX Code: [In index.php]

<script>
function search(string){
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject("XMLHTTP");
        }
        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("search_div").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "search.php?s="+string, true);
        xmlhttp.send(null);
    }
</script>

html text type: [In index.php]

<div class="input-field col s12">
                <i class="material-icons prefix">account_circle</i>
                <input id="name" type="text" name="name" class="validate" onkeyup="search(this.value)">
                <label for="name">Doctor's Name</label>
                <div id="search_div">
              </div>

Data Retrieve from Database: [in search.php]

<?php
ob_start();
require 'config.php';
$conn = new mysqli("localhost","root","","dcare");

if($conn->connect_errno)
{
    die('Sorry! Connection was not Successful');
}

if(isset($_GET['s']) && $_GET['s'] != ''){
    $s = $_GET['s'];
    $sql = "SELECT * FROM doctor WHERE name LIKE '%$s%'";
    $result = $conn->query($sql) or die($conn->error);
    while($row = $result->fetch_assoc()){
        $name = $row['name'];
        $designation = $row['designation'];
        echo "<div style='' id='searchtitle'>" . "<a style='font-family: verdana; text-decoration: none; color: black; href='$name'>" . $name . "</a>" . "</div>";
    }

}

?>

Now I want to Click on the Tania Rahman and The value will be saved to the value of "name" textbox in the index.php file.

Answer 1

So based upon what you have said, all you need is some simple javascript. However to make it a bit tidier, I have modified your script below.

AJAX Code in index.php, just added an additional function.

<script>

function search(string){
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject("XMLHTTP");
        }
        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("search_div").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "search.php?s="+string, true);
        xmlhttp.send(null);
}

function setName(string) {

    document.getElementById("name").value = string;
}

</script>

HTML Code in index.php (not updated)

<div class="input-field col s12">
    <i class="material-icons prefix">account_circle</i>
    <input id="name" type="text" name="name" class="validate" onkeyup="search(this.value)">
    <label for="name">Doctor's Name</label>
    <div id="search_div">
</div>

Search.php

<?php
ob_start();
require 'config.php';
$conn = new mysqli("localhost","root","","dcare");

if($conn->connect_errno)
{
    die('Sorry! Connection was not Successful');
}

if(isset($_GET['s']) && $_GET['s'] != ''){
    $s = $_GET['s'];
    $sql = "SELECT * FROM doctor WHERE name LIKE '%$s%'";
    $result = $conn->query($sql) or die($conn->error);
    while($row = $result->fetch_assoc()){
        $name = $row['name'];
        $designation = $row['designation'];

        // No need for a href in the anchor tag, as you don't want it to redirect to any page, but added a style for a pointer cursor
        echo "<div id='searchtitle'>" . "<a style='font-family: verdana; text-decoration: none; color: black; cursor: pointer;' onclick='setName(\"$name\")'>" . $name . "</a>" . "</div>";
    }

}

?>

I haven't tested it - but it should work provided your script was already working.

A couple of notes:

1. You should avoid using inline styles (ie. <a style="">), as whilst it is a quick and easy solution it makes it harder to maintain your code. Define a style class that has the same attributes. One of the purposes of CSS is to seperate styling from semantics.
2. You should take a look at the alternative syntax for control structures (like if, while etc). It helps keep your HTML tidy when outputting from PHP and avoids the need to do things like echo etc. See the following from the PHP Manual: http://php.net/manual/en/control-structures.alternative-syntax.php

Hope this helps.