如何使自动完成 Jquery UI 插件动态化答案

【问题标题】：How to make the autocomplete Jquery UI plugin dynamic如何使自动完成 Jquery UI 插件动态化
【发布时间】：2016-01-19 11:18:09
【问题描述】：

我正在使用来自here 的 Jquery UI 自动完成插件。问题是，如何将动态内容插入自动完成？这是我尝试过的：

<?php

  $db2 = new mysqli("127.0.0.1", "root", "", "crave crap");
  $one_grab = $db2->query("SELECT * FROM movies");

  echo '<script>
  $(function() {
    var availableTags = [
    </script>';

    while($two_row = mysqli_fetch_array($one_grab)) {
    echo $two_row["title"];
  }

      echo '"ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $("#delete_movie").autocomplete({
      source: availableTags
    });
  });
  </script>';

  ?>

请假设 Jquery 和 Jquery UI 已正确链接...为了进一步解释，我有一个连接到 SQL 查询的 while 循环。我试图将它附加到自动完成内容中，但这不起作用。使用 Jquery UI 自动完成插件执行此操作的正确方法是什么？

编辑@Vijay Arun

这是你发布的代码：

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

  <?php

  $db2 = new mysqli("127.0.0.1", "root", "", "crave crap");
  $one_grab = $db2->query("SELECT * FROM movies");

 while($two_row = mysqli_fetch_array($one_grab)) {
    $data[] = $two_row["title"];
  }

  ?>
  <script>
  $(function() {
    var availableTags = "<?php echo json_encode($data); ?>";
    $("#delete_movie").autocomplete({
      source: JSON.parse(availableTags)
    });
  });
  </script>

</head>
<body>

<div class="ui-widget">
  <input id="delete_movie" name="delete_movie" required>
</div>


</body>
</html>

这看起来正确吗？如果是这样，代码仍然无法正常工作......

【问题讨论】：

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

使用remote 示例，echo json_encode() php

$("#delete_movie").autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "/path/to/php",
      dataType: "json",
      data: {
        q: request.term
      },
      success: function( data ) {
        response( data );
      }
    });
 })

【讨论】：

很好的例子！但是，我想保持在 Jquery UI 示例中使用的相同样式。
“想要保持与 Jquery UI 示例中使用的相同样式” 什么是“相同样式”？ ?请参阅“问题，如何将动态内容插入自动完成？”中的原始问题
样式化版本使用了很好的间距和突出显示。您的示例仅使用文本自动完成...
@ProgrammingTree “样式化的版本使用了很好的间距和突出显示。” 也许更新问题与评论中描述的要求？ “想要保持与 Jquery UI 示例中使用的样式相同的样式” 。原始帖子中的问题似乎是 “问题，如何将动态内容插入自动完成？” 。另请注意，帖子中的解决方案不应影响 .autocomplete() 小部件的样式；仅解决用户搜索术语时从服务器检索数据的方法

【解决方案2】：

您需要两个单独的文件， index.php 和 suggest.php

index.php

<div class="ui-widget">
   <input id="delete_movie" name="delete_movie" required>
</div>
<script>
$(function() {
    $( "#delete_movie" ).autocomplete({
        source: "suggest.php"   
    });
</script>

suggest.php

<?php
    $db2 = new mysqli("127.0.0.1", "root", "", "crave crap");
    $one_grab = $db2->query("SELECT * FROM movies WHERE title LIKE '%{$_GET['term']}%' ");
    while($two_row = mysqli_fetch_array($one_grab)) {
       $data[] = $two_row["title"];
    }
    echo json_encode( $data );

【讨论】：

我只是使用一个虚拟数据，你可以用远程选项来做到这一点
您介意解释一下吗？如何使 $data 等于 while($two_row = mysqli_fetch_array($one_grab)) { echo $two_row["title"]; }
@ProgrammingTree 我已经更新了我的答案，让我们看看吧，
我已经更新了我的问题来回复你。我已经向您展示了您提供给我的完整代码。请告诉我格式是否正确。如果是这样，代码不正确...
我已经修改了答案