使用 Selectize.js 从 SQL 加载远程数据
Remote data loading from SQL with Selectize.js
你会注意到,我是一名数据科学家,而不是程序员/开发人员。
在SQL中,我有一个包含一万个名字的数据库。我设法在我的推特 bootstrap 网站中实施了 selectize.js 工具,但它加载速度很慢。在 Selectize.js、https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md 的帮助页面上,我了解到可以在用户输入内容时即时加载选项。
但是从示例中我无法找到如何从 SQL table 中执行此操作。有人可以用伪代码写下我必须做的事情吗?
简而言之,当用户键入一些名称时,我希望脚本在 SQL table 中找到这些名称并制作 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'
});
您可以尝试类似的方法:
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]";
?>
你会注意到,我是一名数据科学家,而不是程序员/开发人员。
在SQL中,我有一个包含一万个名字的数据库。我设法在我的推特 bootstrap 网站中实施了 selectize.js 工具,但它加载速度很慢。在 Selectize.js、https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md 的帮助页面上,我了解到可以在用户输入内容时即时加载选项。
但是从示例中我无法找到如何从 SQL table 中执行此操作。有人可以用伪代码写下我必须做的事情吗?
简而言之,当用户键入一些名称时,我希望脚本在 SQL table 中找到这些名称并制作 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'
});
您可以尝试类似的方法:
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]";
?>