0

我基本上是从 w3c 学校复制这个示例，当您开始输入名称时，会添加一些建议。没有为我添加任何建议。

nameguess.html

<!DOCTYPE html>
<html lang="en-ca">
<head>
    <meta charset="utf-8" />
    <title>Ajaxing</title>
        <script type="text/javascript">
        <!--
            function showHint(str)
            {
            var xmlhttp;
            if (str.length == 0)
            {
              document.getElementById("txtHint").innerHTML="";
              return;
            }
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","gethint.php?q="+str,true);
            xmlhttp.send();
            }
        //-->
        </script>
</head>
<body>
Hello.<br />
<form method="GET" action="">
    Name: <input type="text" id="txt1" /><br />
    Suggestions: <span id="txtHint"></span>
</body>
</html>

gethint.php

<?php
// Fill up array with names
$a[]="Anna";
//removed code to save space
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
      {
      if ($hint=="")
        {
        $hint=$a[$i];
        }
      else
        {
        $hint=$hint." , ".$a[$i];
        }
      }
    }
  }

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//output the response
echo $response;
?>

我将这两个文件都位于 WAMP 的 www 文件夹中，并且正在运行虚拟服务器。

4

3 回答 3

1

我可以看到其他人已经回答了你正在尝试做的事情，但我建议不要像那个例子那样发出你的 ajax 请求。

而是尝试使用 jQuery 库来发出您的 ajax 请求。我能够将上面的代码缩短为这个。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $.get(
        'gethint.php', //Code behind 

        {q : $("#txt1").val()}, //json string of variables to post

        function(data){$("#txtHint").html(data);}, // What to do with return data

        'json'); //Specify json 
    </script>

从长远来看，这将使生活变得更加轻松，因为必须经历整个混乱并且不得不担心跨浏览器的兼容性是很臭的。

你可以在这里找到更多信息JQuery

于 2012-08-08T00:01:39.907 回答
1

您错过了按键事件绑定：

<input type="text" id="txt1" onkeyup="showHint(this.value)">

此外，您的 PHP 可以简化为

<?php

if(!isset($_GET['q']) exit;

// Fill up array with names
$names = array("Anna", "Vicky");

//get the q parameter from URL
$q=$_GET["q"];

$hints = array();
foreach($names as $name) {
   if (stripos($name, $q) !== -1) $hints[] = $name;
}

if(count($hints) == 0) die("no suggestion");

echo implode(', ', $hints);

?>
于 2012-08-07T23:56:20.630 回答
0

改变这个

<input type="text" id="txt1" />

至

<input type="text" id="txt1" onkeypress="showHint(this.value)"/>

看看这是否有帮助

于 2012-08-07T23:53:19.283 回答