jquery 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>

 目前在ff,ie8中没有问题

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。