Question

我试图通过在自动填充文本框中键入字段的第一个字母来显示特定字段的项目。但是当我在文本框中键入一个字母时，会显示随机字母。请帮助。我是新手。这是我的ajax代码

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

<script>
  function showHint(str) {
if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
} else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET", "drop1.php?search=" + str, true);
    xmlhttp.send();
  }
}
</script>
</html>

<div style="font:14px arial">

    <input type="text" id="search" name="search" onKeyUp="showHint(this.value)"/>
</div>  <p id="txtHint"></p>
</body>

这是Php代码

<?php
include("connection.php");
$search=$_GET['search'];
$query=mysql_query("select * from students WHERE name LIKE '$search%' OR name='$search'");
while($rs = mysql_fetch_array($query)) {
echo $rs['name'];
}
?>

Answer 1

您的代码正常运行。唯一的小问题是，你并没有将每个值分开。您可以使用下面的<br/>在不同的行中显示建议。

 echo $rs['name']."<br/>";

将输入字段更新为：

<input type="text" id="search" name="search" autocomplete="off" onKeyUp="showHint(this.value)"/>

Answer 2

你好吗？

请尝试阅读此Stackoverflow - How to use source: function()… and AJAX in JQuery UI autocomplete。

或尝试：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title> jQuery UI Autocomplete - Default functionality
        < /title>
            < link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
                <script src="//code.jquery.com/jquery-1.10.2.js">
                </script>
                <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js">
                </script>
                <link rel="stylesheet" href="/resources/demos/style.css">
                <script>
                $(function() {

                    $("#tags").autocomplete({
                        source: function(request, response) {
                            var name = jQuery("input.suggest-user").val();
                            jQuery.get("drop1.php?search=" + name, function(data) {
                                console.log(data); // Ok, I get the data. Data looks like that:
                                test = data; // ["one@abc.de", "onf@abc.de","ong@abc.de"]
                                return test; // But what now? How do I display my data?
                            });
                        },
                        minLength: 1
                    });
                });
                </script>
</head>

<body>
    <div class="ui-widget">
        <label for="tags"> Tags:
        </label>
        <input id="tags">
    </div>
</body>

你的php代码：

<?php
include("connection.php");
$search=$_GET['search'];
$query=mysql_query("select * from students WHERE name LIKE '$search%' OR name='$search'");
$rs = mysql_fetch_array($query);
if(is_array($rs)){
    echo json_encode(array_column($rs, 'name'));
}

?>

如何使用ajax在自动完成文本框中显示数据库字段名称

2 个答案: