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

时间:2016-04-29 23:54:41

标签: javascript php html ajax

我已经完成了实时搜索部分。我想将搜索结果的值放入不同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文本类型:[在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>

从数据库中检索数据:[在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并将值保存为&#34; name&#34; index.php文件中的文本框。

1 个答案:

答案 0 :(得分: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>

的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>";
    }

}

?>

我还没有对它进行测试 - 但如果您的脚本已经正常工作,它应该可以正常工作。

几点说明:

  1. 您应该避免使用内联样式(即<a style="">),因为虽然它是一种快速简便的解决方案,但却使维护代码变得更加困难。定义具有相同属性的样式类。 CSS的一个目的是从语义中分离样式。
  2. 你应该看一下控制结构的替代语法(比如if,while等)。它有助于在从PHP输出时保持HTML整洁,并避免需要执行回声等操作。请参阅PHP手册中的以下内容:http://php.net/manual/en/control-structures.alternative-syntax.php
  3. 希望这有帮助。