可编辑的select下拉框

Web前端 专栏收录该内容
19 篇文章 0 订阅

本文将用实例和大家分享一款基于jQuery的下拉框插件,它允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果。我们来看下如何使用。

HTML结构

下面是一个基本的select下拉框。

<div class="row-fluid">
    <div class="span7">
        <select name="basic" id="basic">
            <option value="">BMW</option>
            <option value="">Form</option>
            <option value="">Jeep</option>
            <option value="">Nini</option>
            <option value="" selected="selected">Audi</option>
        </select>       
    </div>
    <br>
</div>

此外还需要加载jQuery库和jquery-editable-select.js文件和jquery-editable-select.css文件

JavaScript

只需要添加一下代码就能实现传统的下拉框变成有输入功能的下拉框了。

$('#editable-select').editableSelect({ 
    filter: false
}); 

选项设置

filter:过滤,即当输入内容时下拉选项会匹配输入的字符,支持中文,true/false,默认true。

effects:动画效果,当触发弹出下拉选择框时的下拉框展示过渡效果,有default,slide,fade三个值,默认是default。

duration:下拉选项框展示的过渡动画速度,有fast,slow,以及数字(毫秒),默认是fast。

事件

onCreate:当输入时触发。

onShow:当下拉时触发。

onHide:当下拉框隐藏时触发。

onSelect:当下拉框中的选项被选中时触发。

事件调用方法:

$('#editable-select').editableSelect({ 
    onSelect: function (element) { 
        alert("Selected!"); 
    } 
}); 

运行结果:

这里写图片描述

完成代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 引入css样式表-->
    <link rel="stylesheet" href="select-box-plugin\src\jquery-editable-select.css">
</head>
<body>
    <div class="row-fluid">
        <div class="span7">
            <select name="basic" id="basic">
                <option value="">BMW</option>
                <option value="">Form</option>
                <option value="">Jeep</option>
                <option value="">Nini</option>
                <option value="" selected="selected">Audi</option>
            </select>       
        </div>
        <br>
    </div>

    <!--引入jquery库和jquery-editable-select.js文件-->
    <script type="text/javascript" src="../3thLib/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="select-box-plugin/dist/jquery-editable-select.js"></script>
    <script type="text/javascript">
    //初始化控件
    $('#basic').editableSelect(
        { filter: false }
    );
    </script>
</body>
</html>

参考资料:
jquery-editable-select 参考官方资料

http://www.cnblogs.com/leohui/p/654d.html

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值