使用Selectize.js从SQL加载远程数据

时间:2015-04-04 08:44:13

标签: selectize.js

正如您将注意到的,我是数据科学家,而不是程序员/开发人员。

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

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

简而言之,当用户键入一些名称时,我希望脚本在SQL表中查找这些名称并生成select html标记,而不是在开头就已经下载了每个名称。

这是我目前的代码:

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

1 个答案:

答案 0 :(得分:19)

您可以尝试以下方式:

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]";
?>