正文

如何使用jQuery实现智能模糊匹配下拉列表，轻松筛选搜索结果

/0 浏览量
0806

在网页设计中，智能模糊匹配下拉列表是一个常见且实用的功能，它可以帮助用户通过输入关键词快速筛选出匹配的结果。使用jQuery来实现这样的功能，可以大大简化开发过程。下面，我将详细讲解如何使用jQuery实现智能模糊匹配下拉列表。

1. 准备工作

首先，确保你的网页中已经引入了jQuery库。如果没有，可以从以下链接下载或使用CDN链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. HTML结构

创建一个简单的HTML结构，包括一个输入框和一个用于显示结果的列表容器：

<input type="text" id="searchInput" placeholder="输入关键词...">
<ul id="resultList"></ul>

3. 数据源

为了实现模糊匹配，我们需要一个数据源。这里，我们可以使用一个简单的数组来模拟：

var dataSource = [
    '苹果',
    '香蕉',
    '橙子',
    '梨',
    '葡萄',
    '西瓜',
    '桃子',
    '李子'
];

4. jQuery插件

编写一个jQuery插件，用于处理模糊匹配和显示结果：

$.fn.autoComplete = function(options) {
    var settings = $.extend({
        source: [],
        minLength: 1,
        select: function(event, ui) {}
    }, options);

    return this.each(function() {
        var $this = $(this);
        var $results = $('<ul></ul>').hide().appendTo($this.parent());

        $this.on('keyup', function() {
            var value = $this.val();
            if (value.length >= settings.minLength) {
                var filtered = settings.source.filter(function(item) {
                    return item.toLowerCase().indexOf(value.toLowerCase()) > -1;
                });

                $results.empty();
                filtered.forEach(function(item) {
                    $('<li></li>').text(item).appendTo($results);
                });

                $results.show();
            } else {
                $results.hide();
            }
        });

        $results.on('click', 'li', function() {
            $this.val($(this).text());
            $results.hide();
            settings.select.call(this, event, { item: $(this).text() });
        });

        $this.on('blur', function() {
            setTimeout(function() {
                $results.hide();
            }, 100);
        });
    });
};

5. 初始化插件

在页面加载完成后，初始化插件并绑定数据源：

$(document).ready(function() {
    $('#searchInput').autoComplete({
        source: dataSource,
        select: function(event, ui) {
            console.log('Selected: ' + ui.item.item);
        }
    });
});

6. 完整示例

以下是完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能模糊匹配下拉列表</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #resultList {
            list-style: none;
            padding: 0;
            margin: 0;
            border: 1px solid #ccc;
            display: none;
        }
        #resultList li {
            padding: 5px;
            cursor: pointer;
        }
        #resultList li:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <input type="text" id="searchInput" placeholder="输入关键词...">
    <ul id="resultList"></ul>

    <script>
        $.fn.autoComplete = function(options) {
            var settings = $.extend({
                source: [],
                minLength: 1,
                select: function(event, ui) {}
            }, options);

            return this.each(function() {
                var $this = $(this);
                var $results = $('<ul></ul>').hide().appendTo($this.parent());

                $this.on('keyup', function() {
                    var value = $this.val();
                    if (value.length >= settings.minLength) {
                        var filtered = settings.source.filter(function(item) {
                            return item.toLowerCase().indexOf(value.toLowerCase()) > -1;
                        });

                        $results.empty();
                        filtered.forEach(function(item) {
                            $('<li></li>').text(item).appendTo($results);
                        });

                        $results.show();
                    } else {
                        $results.hide();
                    }
                });

                $results.on('click', 'li', function() {
                    $this.val($(this).text());
                    $results.hide();
                    settings.select.call(this, event, { item: $(this).text() });
                });

                $this.on('blur', function() {
                    setTimeout(function() {
                        $results.hide();
                    }, 100);
                });
            });
        };

        $(document).ready(function() {
            $('#searchInput').autoComplete({
                source: [
                    '苹果',
                    '香蕉',
                    '橙子',
                    '梨',
                    '葡萄',
                    '西瓜',
                    '桃子',
                    '李子'
                ],
                select: function(event, ui) {
                    console.log('Selected: ' + ui.item.item);
                }
            });
        });
    </script>
</body>
</html>

现在，当你输入关键词时，下拉列表会自动显示匹配的结果。点击任意一个结果，输入框会自动填充，并隐藏下拉列表。

通过以上步骤，你就可以使用jQuery轻松实现智能模糊匹配下拉列表的功能。希望这篇文章能帮助你更好地理解和应用这一技术。

-- 展开阅读全文 --