自动完成基于SQL数据库的文本框结果

Log*_*yne 6 html php mysql jquery autocompletebox

我正在尝试在文本框中创建一个自动完成功能,但结果应该来自我的SQL数据库.

这是我正在尝试配置的代码:
index.php:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Autocomplete - Default functionality</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script>
            $(function() {
                var availableTags = [
                    "autocomplete.php"; ];
                $( "#tags" ).autocomplete({
                    source: availableTags
                });
            });
        </script>
    </head>
    <body>
        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags">
        </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

编辑:我改变了变量availableTags的内容并将其变为var availableTags = <?php include('autocomplete.php') ?>;

变量availableTags是单词的来源,所以我尝试更改它,而是将文件名放在从我的数据库中取出单词的位置.

这是我的autocomplete.php文件:

 <?php

 include('conn.php');
 $sql="SELECT * FROM oldemp";
 $result = mysqli_query($mysqli,$sql) or die(mysqli_error());

 while($row=mysqli_fetch_array($result))
 {
 echo "'".$row['name']."', ";
 }
 ?>
Run Code Online (Sandbox Code Playgroud)

编辑:也改变了while循环的内容并使其成为

$name=mysqli_real_escape_string($con,$row['name']);
$json[]=$name;
Run Code Online (Sandbox Code Playgroud)

如何将autocomplete.php中提取的单词插入到availableTags变量中?

编辑/更新:每当我在文本框中键入内容时,都会显示一个列表,但它没有文本.我知道它正在取代,但这个词本身没有显示在列表中.

Log*_*yne 3

解决了我的问题。

有这样的脚本:

<!-- WITHOUT THESE THREE BELOW, THE AUTOCOMPLETE WILL LOOK UGLY OR WILL NOT WORK AT ALL -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>

  $(function() {
    $( "#tags" ).autocomplete({
      source: "autocomplete.php"
    });
  });

</script>
Run Code Online (Sandbox Code Playgroud)

autocomplete.php我们将在其中获取数据来填充自动完成输入字段):

<?php

  include("conn.php"); /* ESTABLISH CONNECTION IN THIS FILE; MAKE SURE THAT IT IS mysqli_* */

  $stmt = $con->prepare("SELECT description FROM table"); /* START PREPARED STATEMENT */
  $stmt->execute(); /* EXECUTE THE QUERY */
  $stmt->bind_result($description); /* BIND THE RESULT TO THIS VARIABLE */
  while($stmt->fetch()){ /* FETCH ALL RESULTS */
    $description_arr[] = $description; /* STORE EACH RESULT TO THIS VARIABLE IN ARRAY */
  } /* END OF WHILE LOOP */

  echo json_encode($description_arr); /* ECHO ALL THE RESULTS */

?>
Run Code Online (Sandbox Code Playgroud)