0

我有点菜鸟，jQuery而且MySQL......我看过一些教程，但我不知道如何将这些东西与我的数据库结合起来。例如，我有一个表（？），其中包含我在数据库中称为“TOPICS”的所有主题。我想要的是，如果有人使用搜索框，他们将获得这些主题中的建议。

http://jqueryui.com/autocomplete/

这是我想使用的一个非常简单的自动完成功能。我可以根据当地的建议来做，但我不知道如何将它与我的database. 任何帮助，将不胜感激。

4

5 回答 5

1

我认为这就是您所追求的（好吧，无论如何我都会这样做）：

<!doctype html>
<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.3/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.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    var availableTags = [
      <?php
        require "connect.php"; //connect to your database
        $select = "
          SELECT topicname
          FROM topics
          ORDER BY topicname
        ";
        $query = mysqli_query($link, $select);
        if(!$query) die("Error: " . mysqli_error($link) . "\nMySQL: " . $select); //for trouble shooting purposes
        while($array = mysqli_fetch_array($query)){
          echo '"' . $array['topicname'] . '",';
        }
      ?>
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
 <div class="ui-widget">
 <label for="tags">Tags: </label>
 <input id="tags" />
</div>
</body></html>
于 2013-11-06T00:21:02.717 回答
0

您不能直接从 Javascript 连接到 MySQL。您需要一个 php 文件、jsp 文件或类似文件来从数据库中获取结果并将它们返回给自动完成。查看http://www.htmlblog.us/jquery-autocomplete以获得一个简单的示例。

于 2013-01-10T15:01:17.873 回答
0

自动完成提供了一个例子：http: //jqueryui.com/autocomplete/#remote-jsonp

$( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
于 2012-12-16T09:22:01.967 回答
0

与其通过 REST 前端连接到 MySQL，我认为查看第三方解决方案（例如 www.rockitsearch.com）是有意义的。它具有开箱即用的基本自动完成功能。您需要做的就是注册、导出数据并将小部件集成到您的网站。其余的工作将自动为您完成。

于 2013-01-11T05:37:17.417 回答
0

我认为对 PHP 脚本的 Ajax 调用返回 JSON 格式的前 10 个可用答案列表，基于搜索输入文本值，并在搜索框下方的 DIV 中从 Javascript（在 Ajax 调用函数内部）显示，值是可选择/可点击的。

于 2017-06-24T23:31:42.953 回答