JS控件bootstrap suggest plugin使用方法详解

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

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript—window对象使用示例

    下面就为大家详细讲解“JavaScript—window对象使用示例”的完整攻略。 什么是window对象 在javascript中,window对象是一个浏览器对象模型(Browser Object Model,BOM)的一部分,它代表了当前浏览器中的窗口或帧。所有的全局JavaScript对象都可以作为window对象的属性或方法被访问。下面我们来具体了…

    JavaScript 2023年5月27日
    00
  • javascript计算用户打开网页的停留时间

    要计算用户在网页的停留时间,最常用的方法是使用JavaScript。下面是一个完整的攻略: 步骤1:获取网页打开时间 用JavaScript获取网页打开的时间是很简单的。可以使用Date对象来获取当前时间,并将其存储在一个变量中。以下是一个示例代码块: var startTime = new Date().getTime(); 步骤2:获取用户离开网页的时间…

    JavaScript 2023年6月11日
    00
  • js时间戳与日期格式之间相互转换

    关于“js时间戳与日期格式之间相互转换的攻略”,我会从以下方面进行详细讲解: 时间戳和日期格式的概念及区别 时间戳转日期格式的方法 日期格式转时间戳的方法 示例说明 1. 时间戳和日期格式的概念及区别 时间戳是1970年1月1日(UTC/GMT的午夜)距离某一时间点的秒数,可以简单理解成整数形式的时间点。而日期格式则是指可读性较好的时间表示形式,例如“202…

    JavaScript 2023年5月27日
    00
  • JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)

    JavaScript字符串对象的concat方法可用于连接两个或多个字符串,其语法为: str.concat(string2, string3, …, stringX) 其中,str 是原始字符串,string2、string3 等是要连接的字符串。 示例一:连接两个字符串 const str1 = ‘Hello’; const str2 = ‘worl…

    JavaScript 2023年5月28日
    00
  • 深入理解JavaScript 闭包究竟是什么

    深入理解JavaScript 闭包究竟是什么 什么是闭包? 在JavaScript中,闭包是一种特殊的函数。它可以访问它外部作用域中的变量和函数,即使外部函数已经执行完毕,内部函数仍然可以访问外部函数中的变量和函数。这是因为JavaScript采用了词法作用域,并通过作用域链来保存变量和函数。 闭包的应用 保存变量 由于闭包可以访问外部作用域中的变量,因此可…

    JavaScript 2023年6月10日
    00
  • jQuery加密密码到cookie的实现代码

    要实现将加密密码存储到cookie的过程,需要进行以下步骤: 1. 引入jQuery插件 提供加密解密功能的jQuery插件有很多种,这里选择一个比较常用的插件:jquery.cookie。此插件可以方便地创建、读取和删除cookie。 <head> <script src="https://code.jquery.com/jqu…

    JavaScript 2023年6月11日
    00
  • Native.js屏幕截图实例代码

    下面我来详细讲解“Native.js屏幕截图实例代码”的完整攻略。 前置知识 在讲解本文的主要内容之前,我们需要掌握两个知识点: Native.js Native.js 是一个将 JavaScript 源代码编译成本地机器码的编译器,这样可以将 JavaScript 的运行速度提高数倍。 HTML5 Canvas HTML5 Canvas API 提供了一种…

    JavaScript 2023年6月11日
    00
  • javascript数组的定义及操作实例

    下面就是关于“JavaScript数组的定义及操作实例”的完整攻略。 什么是JavaScript数组? 在 JavaScript 中,数组是一种特殊的变量,它们用于存储多个值,这些值可以是任何类型的数据,比如整数、字符串、对象等等。JavaScript中的数组是一种无序集合,数组中的元素可以通过索引访问,索引从0开始。 JavaScript数组的定义方式 定…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部