2

我正在尝试创建一个简单的自动完成文本框，该文本框从数组中获取建议。我正在使用的代码（基于此）是：

调用.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>';
    }
}

?>

索引.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 和检查。但是它仍然无法正常工作。实际上，我只是发现，如果您键入三个单词之一中的字母组合，则会出现建议正确。如果您键入单词的开头字母，它就不起作用。例如，如果我输入“com”作为输入，则会出现自动完成这个词。但是，如果我给出“Aut”则什么都没有。所以我想实际的问题就在这里：

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

从我在这里读到的http://php.net/manual/en/function.strpos.php问题可能是使用 != 但我应该使用 !== 。有什么想法吗？

4

3 回答 3

2

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

于 2012-08-22T12:21:10.043 回答
2

你也可以像这样工作。

http://jsfiddle.net/qz29K/

您只需要像这样用 php jsonencoding 替换 json 数组

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

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

希望这会有所帮助。

于 2012-08-22T13:45:27.383 回答
1

它完全有效！

我尝试过这个。

我有输入：遇见

它给了我隐喻和另一个词。

但是，对于高级用法。看看这个，你会喜欢的。

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

于 2012-08-22T12:18:11.977 回答