【问题标题】:Remote data loading from SQL with Selectize.js使用 Selectize.js 从 SQL 远程加载数据
【发布时间】:2021-10-08 07:28:24
【问题描述】:

您会注意到,我是一名数据科学家,而不是程序员/开发人员。

在 SQL 中,我有一个包含一万个名字的数据库。我设法在我的 twitter bootstrap 网站中实现了 selectize.js 工具,但它的加载速度很慢。在 Selectize.js 的帮助页面 https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md 上,我读到可以在用户输入内容时动态加载选项。

但从示例中我无法从 SQL 表中找到如何执行此操作。有人可以用伪代码写我需要做什么吗?

简而言之,当用户键入一些名称时,我希望脚本在 SQL 表中找到这些名称并选择 html 标记,而不是一开始就下载everyname。

这是我目前的代码:

            <div class="control-group">
                <select id="select-yourself" class="demo-default" placeholder="Type your name...">
                    <option value="">Type your name ...</option>
                        <?php
                            for($row = 0; $row < sizeof($race_table); $row++){
                            echo("<option value=".$row.">".
                            $race_table[$row]['Name']."</option>");
                        }
                        ?>
                </select>
            </div>
            <script>
            $('#select-yourself').selectize({
                create: false,
                maxOptions: 100,
                //sortField: {
                    //field: 'text',
                    //direction: 'asc'
                //},
                dropdownParent: 'body'
            });

【问题讨论】:

    标签: selectize.js


    【解决方案1】:

    你可以试试这样的:

    HTML:

    <div class="control-group">
      <select id="select-yourself" class="demo-default" placeholder="Type your name...">
        <option value="">Type your name ...</option>
      </select>
    </div>
    

    JavaScript:

    $('#select-yourself').selectize({
      valueField: 'name',
      labelField: 'name',
      searchField: 'name',
      options: [],
      create: false,
      load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
          url: 'http://127.0.0.1:8080/getnames.php',
          type: 'GET',
          dataType: 'json',
          data: {
            name: query,
          },
          error: function() {
            callback();
          },
          success: function(res) {
            callback(res);
          }
        });
      }
    });
    

    PHP 文件 (getnames.php) 仅用于从 mysql 数据库数据创建 json 文件:

    <?php
    // parameters from URL
    $urlparam_name = $_GET['name'] ."%";
    
    // connect to the database
    include("mysql.inc");
    $link = mysqli_connect($host, $user, $pass, $db) or die("Error " .mysqli_error($link));
    
    $sql = "
    SELECT `race_table`.`name`
    FROM `race_table`
    WHERE `race_table`.`name` like '$urlparam_name'
    GROUP BY `race_table`.`name` ASC
    ";
    
    $result = mysqli_query($link, $sql) or die("Error " .mysqli_error($link));
    $rows = array();
    while ($row = mysqli_fetch_assoc($result))
    {
        extract($row);
        $rows[] = "{ \"name\": \"$name\" }";
    }
    
    // output to the browser
    header('Content-Type: text/javascript; charset=UTF-8');
    echo "[\n" .join(",\n", $rows) ."\n]";
    ?>
    

    【讨论】:

    • 这是常见的做法还是我在监督什么?
    • 这是常见的做法。您可以通过 selectize.js 作者在此页面上找到演示 [1]。请注意“远程源 - Github”和“远程源 - 烂番茄”示例。 [1]:brianreavis.github.io/selectize.js
    • “另一个网站”只是从服务数据库中获取一些信息的一种方式。我的示例中的“网站”是“127.0.0.1:8080”,服务器端脚本语言是 PHP,数据库是 MySQL 之一。您的 url 会有所不同,这取决于您的站点域名和结构,以及用于获取 json 结构的语言(PHP、Java、Perl、ASP.NET、Python、Ruby 甚至 C、CGI 中的 C++ 等)来自您的数据库等的数据。
    • 我的 ajax 返回正确的数据,[{"id":306,"name":"Hip Measurement"}]。但我不确定如何更新选择选项以反映此数据。请您赐教,关于回调方法的更多信息?
    • 我们已经从数据库中搜索过数据,为什么还要使用searchField: 'name',
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-01-30
    • 1970-01-01
    • 2023-04-06
    • 1970-01-01
    • 1970-01-01
    • 2018-01-02
    • 2015-05-12
    相关资源
    最近更新 更多