jQuery Searchable 插件使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00493/article/details/141842484

jQuery Searchable 插件使用教程

jquery-searchableTiny, fast jQuery plugin to search through elements as you type.项目地址:https://gitcode.com/gh_mirrors/jq/jquery-searchable

1、项目介绍

jQuery Searchable 是一个轻量级且快速的 jQuery 插件，用于在输入时搜索元素。该插件通过替换常规的 HTML <select> 元素，提供了一个用户友好的搜索组件，支持完全可搜索的选项、多种数据加载方式、易于使用的多选功能（无需按 Ctrl 键），并且完全可样式化。

2、项目快速启动

安装

首先，从 GitHub 仓库下载插件：

git clone https://github.com/stidges/jquery-searchable.git

引入文件

在 HTML 文件中引入 jQuery 和 jQuery Searchable 插件：

<script src="jquery.js"></script>
<script src="jquery.searchable.js"></script>

初始化插件

在页面加载完成后，初始化插件：

<script>
$(document).ready(function() {
    $('#table').searchable();
});
</script>

示例代码

以下是一个完整的示例，展示如何在表格中使用搜索功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Searchable 示例</title>
    <script src="jquery.js"></script>
    <script src="jquery.searchable.js"></script>
</head>
<body>
    <table id="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>30</td>
            </tr>
            <tr>
                <td>Charlie</td>
                <td>35</td>
            </tr>
        </tbody>
    </table>

    <script>
    $(document).ready(function() {
        $('#table').searchable();
    });
    </script>
</body>
</html>