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技术站