Question

我正在尝试创建一个简单的自动填充文本框，它接受来自数组的建议。我正在使用的代码（基于this）是：

call.php

<?php
$list = array(
    "Autocomplete",
    "Metapher",
    "Metatag");

for($i=0; $i<count($list); $i++){
    if(strpos($list[$i], $_GET['str']) !== FALSE && strlen($_GET['str']) >= 2){
        echo str_ireplace($_GET['str'], '<b style="color:   red;">'.$_GET['str'].'</b>', $list[$i]) . '<br>';
    }
}

?>

的index.php

<!DOCTYPE html>
<html>
    <head>
        <title>AJAX - 03</title>
        <script type="text/javascript">
            var ajax = new XMLHttpRequest;

            function t(){           
                ajax.open("GET", "call.php?str=" + document.getElementById("test").value, false);
                ajax.send();

        ajax.onreadystatechange=function()
        {
          if (ajax.readyState==4 && ajax.status==200)
          {
                document.getElementById("container").innerHTML = ajax.responseText;
          }
       }
    }

        </script>
    </head>

<body>
    <div id="container" style="border: 3px; border-style: solid; font-size: 42pt; border-radius: 7px;">
    Text
    </div>

    <br><br>
    <input id="test" type="text" onkeyup="javascript:t()">
</body>
</html>

但建议框中没有任何内容。我找不到任何语法错误，所以我认为逻辑有问题？

更新：在PLB和FAngel的建议之后，我添加了onreadystatechange和checks.However它仍然没有。工作正常。实际上我只是发现，如果你键入3个单词之一内的字母的组合，建议正确。如果你输入一个单词的起始字母，它就无法工作。例如，如果我将“com”作为输入，那么单词Autocomplete就会出现。但是如果我给出“Aut”则没有任何内容。所以我猜这里的实际问题是：< / p>

if(**strpos($list[$i], $_GET['str']) !== FALSE** && strlen($_GET['str']) >= 2)

从我在这里阅读http://php.net/manual/en/function.strpos.php，问题可能是使用！=但我使用！==我应该这样做。任何想法？

Answer 1

您错过了您的请求是异步的。因此，当您运行此行：document.getElementById("container").innerHTML = ajax.responseText;时，请求尚未完成。看看this。 onreadystatechange是您所需要的。或者使该呼叫同步

Answer 2

你也可以像这样工作。

http://jsfiddle.net/qz29K/

你需要的只是用这样的

php jsonencoding替换json数组

$list = array(
"Autocomplete",
"Metapher",
"Metatag");

<script>
var availableTags = <?php echo json_encode($list) ?>
</script>

希望这会有所帮助。

Answer 3

完全有效！

我试过了。

我输入了：Met

它给了我Metaphor和另外一个词。

但是，对于高级用法。看看这个，你会爱上它。

http://jqueryui.com/demos/autocomplete/

数组中的ajax自动完成

3 个答案: