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

Question

我已经完成了实时搜索部分。我想将搜索结果的值放入不同 php 文件的文本框中。

AJAX 代码：[在 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文本类型：[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>

从数据库中检索数据：[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>";
    }

}

?>

现在我想点击 Tania Rahman 并将该值保存到 index.php 文件中“名称”文本框的值。

Answer 1

所以根据你所说的，你所需要的只是一些简单的 javascript。但是为了让它更整洁，我在下面修改了你的脚本。

index.php 中的 AJAX 代码，只是添加了一个附加功能。

<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>

index.php 中的 HTML 代码（未更新）

<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>

搜索.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>";
    }

}

?>

我尚未对其进行测试 - 但如果您的脚本已经运行，它应该可以运行。

几点说明：

1. 您应该避免使用内联样式（即<a style="">），因为虽然它是一种快速简便的解决方案，但它会使您的代码更难维护。定义一个具有相同属性的样式类。 CSS 的目的之一是将样式与语义分开。
2. 您应该看看控制结构的替代语法（如 if、while 等）。它有助于在从 PHP 输出时保持 HTML 整洁，并避免需要执行 echo 等操作。请参阅 PHP 手册中的以下内容：http://php.net/manual/en/control-structures.alternative-syntax.php

希望这会有所帮助。