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日

相关文章

  • 微信小程序 生命周期和页面的生命周期详细介绍

    下面详细讲解一下微信小程序的生命周期和页面的生命周期: 微信小程序生命周期介绍 微信小程序生命周期分为两个部分:全局生命周期和页面生命周期。全局生命周期是指在整个小程序中被执行的方法,而页面生命周期则是指在页面中被执行的方法。 全局生命周期 全局生命周期包含以下方法: 1. onLaunch(options) 在小程序初始化完成时执行,只会执行一次。 参数说…

    JavaScript 2023年6月11日
    00
  • JavaScript中的函数申明、函数表达式、箭头函数

    在 JavaScript 中,函数定义有三种方式:函数声明、函数表达式和箭头函数。 函数声明 函数声明是定义一个函数的常见方式,语法如下: function add(x, y) { return x + y; } 其中 add 是函数名,x 和 y 是参数,return 关键字用于返回计算结果。 函数声明有一个重要的特点,就是函数可以在声明之前被调用(也就是…

    JavaScript 2023年5月27日
    00
  • Python 功能和特点(新手必学)

    Python 功能和特点(新手必学) Python 是一种高级编程语言,具有简单易学、开发效率高等特点,非常适用于数据分析、机器学习、人工智能等领域。下面详细讲解 Python 的功能和特点。 功能 语法简单易学 Python 的语法非常简单,类似于英语,易于理解和记忆。以下是一个简单的 Python 程序,输出 “Hello World!”。 print(…

    JavaScript 2023年5月28日
    00
  • JS实现水平移动与垂直移动动画

    JS实现水平移动与垂直移动动画的攻略步骤如下: 步骤一:获取需操作的元素 首先,我们需要获取需要操作的元素,可以通过以下方式获取: const elem = document.querySelector(‘#target’); 其中,#target是需要操作的元素的id。 步骤二:水平移动动画 接下来,我们开始实现水平移动动画,具体步骤如下: 1. 定义初始…

    JavaScript 2023年6月10日
    00
  • vue.js利用Object.defineProperty实现双向绑定

    Vue.js是一款流行的JavaScript框架,它提供了一种简单易用的双向绑定机制。这个机制能够直接监测数据模型的变化并及时更新视图,同时也支持用户的交互操作实现数据的修改。 Vue.js采用了基于Object.defineProperty实现的双向绑定机制,通过这个机制我们可以将数据模型和视图双向绑定起来。下面我们将详细介绍这个机制的实现方法。 1、Ob…

    JavaScript 2023年6月11日
    00
  • 8个JavaScript中高阶函数的运用分享

    8个JavaScript中高阶函数的运用分享 什么是高阶函数 高阶函数是指接收函数作为参数和/或返回函数作为结果的函数。JavaScript中的函数是第一类对象,因此函数也可以像变量一样进行传递和操作。高阶函数是JavaScript中非常常见的编程模式,使用高阶函数可以提高代码的重用性和可读性。 具体运用 1. map() map()方法是在JavaScri…

    JavaScript 2023年5月18日
    00
  • JS正则表达式验证账号、手机号、电话和邮箱是否合法

    下面我将介绍使用JavaScript正则表达式来验证账号、手机号、电话和邮箱是否合法的方法。 验证账号 账号的验证规则是由字母、数字、下划线组成的,长度为4-16位。我们可以使用正则表达式来进行验证。具体代码如下: function validateUsername(username) { var pattern = /^[a-zA-Z0-9_]{4,16}…

    JavaScript 2023年6月10日
    00
  • Layui事件监听的实现(表单和数据表格)

    概述: Layui是一个轻量级的前端UI框架,其特点是注重结构化,适度封装与扩展性,而且非常适合大型的前端应用开发。在Layui中,实现事件监听是非常重要的一部分。本文将详细介绍Layui事件监听的实现,包括如何监听表单提交事件、数据表格行操作事件等常见事件,同时提供完整的代码示例进行说明。 Layui表单提交事件监听: 在Layui提交表单的过程中,可以通…

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