主要实现的功能有。

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中没有问题

jquery combobox的更多相关文章

  1. jquery easyui combobox 级联及触发事件，combobox级联

    jquery easyui combobox 级联及触发事件,combobox级联 >>>>>>>>>>>>>>&g ...

  2. 自写Jquery插件 Combobox

    原创文章,转载请注明出处,https://www.cnblogs.com/GaoAnLee/p/9092421.html 上效果 html <span id='combobox' class=' ...

  3. 240个jquery插件（转）

    http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/File upload Ajax File U ...

  4. jquery插件库

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  5. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  6. 强烈推荐240多个jQuery插件提供下载

    jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是—写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的 ...

  7. 240多个jQuery插件

    概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是—写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不 ...

  8. 海量jQuery插件

    转自:http://blog.csdn.net/zzq58157383/article/details/6900142 提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用 ...

  9. jquery插件下载地址

    以下是本人收集的jquery插件下载地址: .............版本自行选择. jquery官网:http://jquery.com/ jquery.validate.js 官网下载地址:htt ...

随机推荐

  1. 【转】构建C1000K的服务器(1) – 基础

    原文来自 ideawu 构建C1000K的服务器(1) – 基础 著名的 C10K 问题提出的时候, 正是 2001 年, 到如今 12 年后的 2013 年, C10K 已经不是问题了, 任何一个普 ...

  2. UE4 材质切换（带动画效果）

    先看效果图:小木块掉到地板上(小木块本身会消失掉),地板就开始了动效材质切换.引擎版本用的是4.11.2 方法步骤: 首先在UE4内容浏览器中新建一个材质. 第一步要实现一个扫光的效果,如下图. 实现 ...

  3. APP邂逅即时通讯云，让你的手机APP聊起来

     #推荐活动# #线下沙龙# 明天下午在IC咖啡 —— <APP邂逅即时通讯云,让你的手机APP聊起来>, http://url.cn/Y8sYo5 

  4. 通过源码成功启动odoo 10.0

  5. 使用bat脚本添加JAVA_HOME和修改PATH

    add_jre.bat ::添加环境变量JAVA_HOME @echo off echo 添加java环境变量 set regpath=HKEY_LOCAL_MACHINE\SYSTEM\Curren ...

  6. DOM编程 删除节点

    需求: 为每个 li 节点添加一个 confirm(确认对话框): 确定要删除 xx 的信息吗?若确定, 则删除 1,获取li所有节点 var liNodes = document.getElemen ...

  7. 【NOIP2009 T3】 最佳贸易 （双向SPFA）

    C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双向通行的道 ...

  8. get------引用接口

    关于引用接口   1.    通过get方式 2.   String  poiUrl="http://接口地址?接口ID=接口给你的ID&参数1=?&参数2=?&参数 ...

  9. zip伪加密文件分析（进阶版）

    作者近日偶然获得一misc题,本来以为手到擒来,毕竟这是个大家都讨论烂了的题,详情访问链接http://blog.csdn.net/ETF6996/article/details/51946250.既 ...

  10. Quartz2D之生成圆形头像、打水印、截图三种方法的封装

    我给UIImage类添加了一个类目,用于封装三个方法,每个方法都没有难度,做这个主要为了练习一下封装: 首先在类目.h文件中声明三个方法:以及创建了一个枚举.用于水印方法中设定水印位置:方法说明和参数 ...