基于WebGrid的文本框下拉选择

这个东西是基于我去年写的WebGrid开发的一个文本框下拉选择组件，使用时不需要改任何东西，只需要将需要下拉选择的文本框传入，并且完成获取数据方法就可以了。这个东西需要WebGrid支持（还有jquery 1.3以上），过几天我会上传最新的WebGrid。

下面是对象实现

function ShowDropDown(control, dataKey) {    var grid = null;    var p = this;    this.Control = control;    this.Valve = 1;    this.ShowCount = 10;    this.DataSource = [];    this.DataKey = dataKey;    this.DivContainer = $("<div style=\"position: absolute;\"></div>");    this.GridContainer = $(Global.StringFormat("<table style=\"background-color: White;\"><tr><td>KeyWord</td></tr><tr><td bind=\"{Name:'{0}',BindType:'innerText'}\" align=\"left\"></td></tr></table>", [this.DataKey]));    this.DivContainer.append(this.GridContainer);    this.DivContainer.insertBefore(this.Control);        this.Init = function () {        grid = new Grid(this.GridContainer);        grid.ShowTitle = false;        grid.AutoPage = false;        grid.ShowPageInfo = false;        grid.AllowRowSelect = true;        grid.RowSelectStyle = "SelectedItemSearch";        grid.PreSelectRow = function (tr) {            var selectItme = Global.GetData(tr);            $.each(selectItme, function (index, item) {                p.Control.val(item);            });        }        this.Control.bind("propertychange", function () {            var txtValue = $(this).val();            p.DivContainer.hide();            if (txtValue.length > 0) {                p.ValueChange(true);                p.DivContainer.show();            }        });        grid.Init();        var top = this.GetTop(0, this.Control[0]) + this.Control.attr("offsetHeight");        var left = this.GetLeft(0, this.Control[0]);        this.DivContainer.css("top", top);        this.DivContainer.css("left", left);        this.DivContainer.hide();    }    this.ReadData = function (func) { }    this.IsValue = function (item) {        var txtValue = this.Control.val();        return Global.StartWith(item, txtValue);    }    this.ValueChange = function (nextFind) {        var bindDataValue = [];        for (var i = 0; i < this.DataSource.length; i++) {            var item = this.DataSource[i];            if (bindDataValue.length >= this.ShowCount) {                this.BindData(bindDataValue);                return;            }            if (this.IsValue(item)) {                bindDataValue.push(item);            }        }        if (nextFind && bindDataValue < this.Valve) {            this.ReadData(this.ExecBind);            return;        }        this.BindData(bindDataValue);    }    this.ExecBind = function (data) {        p.DataSource = data;        p.ValueChange(false);    }    this.BindData = function (data) {        grid.Clear();        grid.DataSource = data;        grid.DataBind();    }    this.GetLeft = function (left, item) {        if (Global.IsNull(item)) {            return left;        }        left += item.offsetLeft;        return this.GetLeft(left, item.offsetParent);    }    this.GetTop = function (top, item) {        if (Global.IsNull(item)) {            return top;        }        top += item.offsetTop;        return this.GetTop(top, item.offsetParent);    }}

 

下面是调用例子，有一个名为txtKeyWord的文本框

        <table>        <tr>        <td align="right" bgcolor="#fafbfc">            <input id="txtKeyWord"               maxlength="480" style="width: 120px"/>        </td>                </tr>        </table>

创建下拉对象

    //创建一个下拉对象第一个参数就是你的文本框对象，第二个是你要绑定实体中那个属性    var dropDownItem = new ShowDropDown($("#txtKeyWord]"), "Keyword");    dropDownItem.ShowCount = 10; //最大显示数量    dropDownItem.Valve = 1; //最小阀值，只有符合条件的现有数据少于此值才会重新向数据库请求数据    dropDownItem.Init();    //这个方法必须实现，因为实体会一次下载多条记录，但显示只会显示前N条，且只有在内存中数据列表    //少于阀值时才会重新连接数据库去拿数据    dropDownItem.IsValue = function (item) {        //item 实体中要比较的值，用这个值可文本框中现有的字符比较已确认是否为需要的内容    }    //这个方法必须实现此方法用来向数据库获取数据    dropDownItem.ReadData = function (func) {        //func 因为获取数据可能是异步的，所以获取完数据后需要调用func(data)方法将获得的数据传入        //func 有一个参数data，就是你要传给下拉对象的数据结合    }

 

调用后直接打开页面就有下拉了，非常方便也不需要修改原有程序。