JQuery WEUI Select 组件增加搜索栏示例demo

在本文中，我们将介绍如何使用JQuery和WEUI框架创建一个带有搜索栏的Select组件示例demo。

首先，我们需要引入JQuery和WEUI的相关资源文件。在HTML文件的头部添加以下代码：

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.0/weui.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweui/1.4.0/jweui.min.js"></script>

接下来，我们创建一个Select组件的HTML结构，并增加一个input元素作为搜索栏。示例代码如下：

<div class="weui-cell weui-cell_select weui-cell_select-before">
    <div class="weui-cell__bd">
        <select class="weui-select" id="select">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
        </select>
    </div>
    <div class="weui-cell__ft">
        <input class="weui-input" type="text" id="searchInput" placeholder="搜索">
    </div>
</div>

现在，我们使用JQuery编写JavaScript代码来实现搜索功能。当输入框内容发生变化时，我们将使用JQuery的filter方法来筛选符合条件的选项，并显示出来。示例代码如下：

$(document).ready(function(){
    $('#searchInput').on('input', function(){
        var searchText = $(this).val();
        $('#select option').each(function(){
            if($(this).text().toLowerCase().indexOf(searchText.toLowerCase()) === -1){
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });
});

以上代码首先利用JQuery的on方法监听输入框的input事件，然后获取输入框中的文本内容。接着使用JQuery的each方法遍历Select组件中的所有选项，根据搜索栏的内容来筛选选项是否显示。

最后，我们需要初始化WEUI的Select组件。示例代码如下：

weui.form.render('select');

现在，我们已经完成了带有搜索栏的Select组件示例demo。用户可以在输入框中输入关键词，Select组件会根据关键词筛选出符合条件的选项并显示出来。这样就使得用户在选择选项时更加快捷和方便。