JS控件bootstrap suggest plugin使用方法详解
简介
Bootstrap Suggest Plugin是一个基于Bootstrap框架开发的下拉菜单插件,它通过jQuery来实现自动补全和建议功能,可以非常方便地为文本框、选择器添加下拉菜单。
安装
首先,你需要引入 Bootstrap Suggest插件的js文件,并且在页面中放置文本框或其他相关元素。你可以将以下代码放在
标签中引入Bootstrap Suggest插件所需的CSS和JS文件:<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-suggest/3.0.0/bootstrap-suggest.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-suggest/3.0.0/bootstrap-suggest.min.js"></script>
接下来,你需要在你的HTML文档中添加一个文本框,并在其上设置data-toggle为suggest,以及用data-source设置数据源。
<input type="text" id="mySuggest" data-toggle="suggest" data-source='["Apple", "Apricot", "Banana", "Blackberry"]'>
这里data-source是一个包含了数据源的数组。
如果你想要将数据源从数据库中获取,你可以使用由Bootstrap Suggest提供的Ajax方法来获取数据。使用Ajax方法的代码如下:
<input type="text" id="mySuggest" data-toggle="suggest" data-ajax-url="http://myUrl.com/getData" >
使用
当你完成以上准备步骤后,你就可以使用Bootstrap Suggest插件了。按下方示例进行使用:
$(document).ready(function () {
$('#mySuggest').bsSuggest({
allowNoKeyword: true,
showHeader: true,
effectiveFieldsAlias: {id: "序号", name: "名称", price: "价格", desc: "详细信息"},
getDataMethod: "url",
delayUntilKeyup: true,
url: "search.php?action=search&type=suggest&keyword=",
idField: "id",
keyField: "name"
});
});
上述例子的主要框架如下:
$("#mySuggest").bsSuggest({
//自定义参数
});
其中,bsSuggest()是用于初始化Bootstrap Suggest的方法。你可以通过这个方法指定Bootstrap Suggest插件的行为和参数。
一些基本参数的说明:
allowNoKeyword
:是否允许不输入关键字进行查询。默认值为false,表示必须输入关键字才能进行搜索。showHeader
:是否显示表头。默认值为true。effectiveFieldsAlias
:指定下拉菜单中“关键字”、“ID”、“别名”的字段名。getDataMethod
:数据源获取方式。可选值有"data", "url", "json", 默认值为"data".url
:getDataMethod设为"url"时使用,提供异步获取数据源的URL地址,此处需要指定查询字符串。默认为""。delayUntilKeyUp
:是否等待键盘keyup事件触发时才搜索,为true表示是,false表示否。默认为true。idField
:在Ajax获取数据源时,指定与每条记录对应的字段名。默认值为"id"。keyField
:在Ajax获取数据源时,指定显示在下拉列表中的关键字所对应的字段名,默认为"name"。
示例
下面提供一个从数据库中获取数据并填充文本框的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Suggest Plugin</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-suggest/3.0.0/bootstrap-suggest.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" id="mySuggest" data-toggle="suggest" data-ajax-url="ajax.php?action=search&type=suggest&keyword=">
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-suggest/3.0.0/bootstrap-suggest.min.js"></script>
<script>
$(document).ready(function () {
$('#mySuggest').bsSuggest({
allowNoKeyword: true,
showHeader: true,
getDataMethod: "url",
url: "ajax.php?action=search&type=suggest&keyword=",
delayUntilKeyup: true,
idField: "id",
keyField: "name"
}).on('onSetSelectValue', function (e, keyword) {
$("#text").val(keyword.id);
});
});
</script>
</body>
</html>
在这个例子中,我们主要使用了ajax.php文件来获取数据源。ajax.php文件的代码如下:
<?php
header("Content-Type: application/json");
$db = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "root");
$action = $_GET['action'];
$searchType = $_GET['type'];
$keyword = isset($_GET['keyword']) ? $_GET['keyword'] : '';
if ($action == 'search') {
$perPage = 10;
$page = $_GET['page'];
$sidx = $_GET['sid'];
$sord = $_GET['sord'];
$start = ($page - 1) * $perPage;
if ($searchType == 'suggest') {
$sql = "SELECT id,name FROM sites WHERE name LIKE :kw ORDER BY $sidx $sord LIMIT :start,:perPage";
$stmt = $db->prepare($sql);
$stmt->bindValue(':start', $start, PDO::PARAM_INT);
$stmt->bindValue(':perPage', $perPage, PDO::PARAM_INT);
$stmt->bindValue(':kw', "$keyword%", PDO::PARAM_STR);
} else {
$sql = "SELECT * FROM sites WHERE name LIKE :kw ORDER BY $sidx $sord LIMIT :start,:perPage";
$stmt = $db->prepare($sql);
$stmt->bindValue(':start', $start, PDO::PARAM_INT);
$stmt->bindValue(':perPage', $perPage, PDO::PARAM_INT);
$stmt->bindValue(':kw', "%$keyword%", PDO::PARAM_STR);
}
$stmt->execute();
$result['Rows'] = $stmt->fetchAll(PDO::FETCH_ASSOC);
$result['Total'] = 10;
$jsonData = json_encode($result);
echo $jsonData;
}
?>
为了方便起见,我们在本地的数据库中创建了一个名为test的数据库,其中包含一个名为sites的表。
这个表包含以下字段:id、name、url、alexa、country、rank。
注意,我们只使用了其中的id和name字段,所以你可以在自己的项目中按需更改数据源。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS控件bootstrap suggest plugin使用方法详解 - Python技术站