zoukankan      html  css  js  c++  java
  • jquery combobox

    虽然在.net中有ajaxControlToolKit的combobox。但是那个combobox实在是不给力。在网上找了很久,还是没有找到合适的combobox.于是自己封装了一个。

    主要实现的功能有。

    1.点击标签,显示所有数据源

    2.在text中输入文本,模糊匹配。

    3.配置是否必须要选择。

    4.添加选中时的事件。

    具体描述如下。

    combobox原型属性:        原型属性主要的用途为一次设定,所有combobox的实例都可以使用

    maxLength       自动搜索时,显示的最大长度,默认为所有,主要是因为搜索出来过多时,影响速率

    mustSelect       必须选择,默认为false ,配置该combobox是否必须选择

    fieldText           数据源的文本字段,默认为text

    fieldValue          数据源的ID字段,默认为id

    combobox原型方法

    Init()               初始化所有combobox外观,第一个参数为jquery选择器,选择多个可以设定textbox的class,第二个参数为图片地址,

    combobox属性

    host                         该combox对应text的选择器,如“#demo”

    dataSource                数据源

    defaultText                combobox默认显示的值

    事件

    onSelected       当选择一个options时触发,参数为option的 jquery对象,如参数名为jqdom ,那么id应该是jqdom.attr(‘id’)

                           text应该为jqdom.text();

    dataBind()       绑定combobox的数据源。

     

    简单调用

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title></title>
    <link rel="Stylesheet" href="combobox/jquery.combobox.css" />
    <script type="text/javascript" src="combobox/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript" src="combobox/jquery.combobox.js"></script>
    <script type="text/javascript">
    $(
    function() {
    //设置该页面上所有combobox的模式
    //combobox.prototype.mustSelect = false; //必须选择参数,默认为false
    //combobox.prototype.fieldText = "text"; //设置数据源文本命名,默认为text
    //combobox.prototype.fieldValue = "id"; //设置数据源id命名,默认为id
    // combobox.prototype.maxLength = 3; //自动搜索显示20项,默认为null.即不限制
    //初始化所有combobox
    //如果有多个text要改成combobox.请在text上设置class。然后id参数使用‘.class',如 combobox.prototype.init(".demos")
    combobox.prototype.init("#demo", "combobox/dropdown.gif");

    //绑定
    var combo = new combobox("#demo");
    combo.dataSource
    = [{ id: 'i1', text: 't1' }, { id: 'i2', text: 't2' }, { id: 'i3', text: 't3' }, { id: 'i4', text: 't4' }, { id: 'i5', text: 't5'}];
    //combo.defaultText = "xx";//text的默认值,默认为text的value;
    combo.dataBind();
    });
    </script>
    </head>
    <body>
    <input type="text" id="demo" value="ab" />
    </body>
    </html>

    样式不是很好,懂得css的人调下,目前在ff,ie8中没有问题。

    demo下载

  • 相关阅读:
    Linux C下的正则表达式
    中英文i18 vue参数传递
    es map的用法
    webpack中publicPath问题
    prop中如何获取vue data中的数据 中英文方案
    利用map reduce方法将对象转成数组
    WPF 踩坑笔记2
    WPF 踩坑笔记1
    RabbitMQ 高阶用法 之 x-expire 过期时间设置
    JANUSEC应用网关1.0发布,提供一站式安全交付能力
  • 原文地址:https://www.cnblogs.com/xinjian/p/1968955.html
Copyright © 2011-2022 走看看