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

I was trying to display items of a particular field by typing the first letter of the field into an autocomplete textbox.But when I type a letter into the textbox,random letters are shown.Please Help.I am new at this. here is my ajax code

我试图通过在自动填充文本框中键入字段的第一个字母来显示特定字段的项目。但是当我在文本框中键入一个字母时,会显示随机字母。请帮助。我是新手。这是我的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>

Here is the Php code

这是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'];
}
?>

2 个解决方案

#1

Your code is working. The only minor issue is, You didn't separate each value. You could use <br/> like below to appear suggestions in different line.

你的代码正在运行。唯一的小问题是,您没有将每个值分开。您可以使用如下所示在不同行中显示建议。

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

Update input field as :

将输入字段更新为:

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

#2

how are you?

你好吗?

Try read this * - How to use source: function()… and AJAX in JQuery UI autocomplete.

尝试阅读此* - 如何在JQuery UI自动完成中使用source:function()...和AJAX。

Or try:

<!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>

your php code:

你的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'));
}

?>

#1