文本框自动完成功能

Technorati 标签: 自动完成,wcf,ajax,jquery

由于工作需要简单研究了下文本框自动完成功能，觉得还可以，贴出来以便日后查看。

我使用asp.net和带Ajax的wcf服务功能实现的，有三部分组成：

1.一个脚本来控制自动完成的现实隐藏以及箭头键的选择。

2.wcf功能从数据库取出数据

3.在页面添加主函数来完成后台数据到前台的提取。

第一个代码：

var Div_bg_color = "#EEE";
var Div_highlight_color = "#C30";
var Div_font = "Arial";
var Div_padding = "2px";
var Div_Border = "1px solid #CCC";
//结果的个数
var divLen = 0;
//文本输入框
var queryField;
//下拉区ID
var divName;
//记录上传选择的值
var lastVal = "";
//IFrame名称
var ifName;
//当前选择的值
var val = "";
//显示结果的下拉区
var glogalDiv;
//下拉去是否设置格式的标记
var divFormatted = false;
function InitQueryCode(queryFieldName, hiddenDivName) {
    queryField = document.getElementById(queryFieldName);
    queryField.onblur = hideDiv;
    queryField.autocomplete = "off";
    queryField.onkeydown = keypressHandler;
    if (hiddenDivName) {
        divName = hiddenDivName;
    }
    else {
        divName = "querydiv";
    }

    ifName = "queryiframe";
    setTimeout("mainLoop()", 100);
}
//获取下拉区的div,若没有则创建
function getDiv(divID) {
    if (!glogalDiv) {
        if (!document.getElementById(divID)) {
            var newNode = document.createElement("div");
            newNode.setAttribute("id", divID);
            document.body.appendChild(newNode);
        }
            glogalDiv = document.getElementById(divID);

            var x = queryField.offsetLeft;
            var y = queryField.offsetTop + queryField.offsetHeight;
            var parent = queryField;
            while (parent.offsetParent) {
                parent = parent.offsetParent;
                x += parent.offsetLeft;
                y += parent.offsetTop;
            }
            if (!divFormatted) {
                glogalDiv.style.backgroundColor = Div_bg_color;
                glogalDiv.style.fontFamily = Div_font;
                glogalDiv.style.padding = Div_padding;
                glogalDiv.style.border = Div_Border;
                glogalDiv.style.width = "100px";
                glogalDiv.style.fontSize = "90%";

                glogalDiv.style.position = "absolute";
                glogalDiv.style.left = x + "px";
                glogalDiv.style.top = y + "px";
                glogalDiv.style.visibility = "hidden";
                glogalDiv.style.zIndex = 10000;
                divFormatted = true;
            }
        }
        return glogalDiv;
    }

    //根据返回的结果集显示下拉区
    function showQueryDiv(resultArray) {
        var div = getDiv(divName);
        while (div.childNodes.length > 0) {
            div.removeChild(div.childNodes[0]);
        }
        for (var i = 0; i < resultArray.length; i++) {
            var result = document.createElement("div");
            result.style.cursor = "pointer";
            result.style.padding = "2px 0px 2px 0px";
            //设置为未选中
            _unhighlightResult(result);

            //设置鼠标移进，移出等事件响应函数
            result.onmousedown = selectResult;
            result.onmouseover = highlightResult;
            result.onmouseout = unhighlightResult;

            //结构的文本是一个span
            var result1 = document.createElement("span");
            result1.className = "result1";
            result1.style.textAlign = "left";
            result1.style.fontWeight = "bold";
            result1.innerHTML = resultArray[i];

            result.appendChild(result1);

            div.appendChild(result);
        }
        divLen = resultArray.length;
        showDiv(divLen > 0);
    }

    //用户单击某个结果时，将文本框的内容替换为结果的文本并隐藏下拉区
    function selectResult() {
        _selectResult(this);
    }

    //选择一个条目
    function _selectResult(item) {
        var spans = item.getElementsByTagName("span");
        if (spans) {
            for (var i = 0; i < spans.length; i++) {
                if (spans[i].className == "result1") {
                    queryField.value = spans[i].innerHTML;
                    lastVal = val = queryField.value;
                   // mainLoop();
                    queryField.focus();
                    showDiv(false);
                    return;
                }
            }
        }
    }

    //当鼠标移到某个条目之上时，高亮显示该条目
    function highlightResult() {
        _highlightResult(this);
    }
    function _highlightResult(item) {
        item.style.backgroundColor = Div_highlight_color;
    }

    /*
    当鼠标移出某个条目时，正常显示该条目
    */
    function unhighlightResult() {
        _unhighlightResult(this);
    }
    function _unhighlightResult(item) {
        item.style.backgroundColor = Div_bg_color;
    }

    /*显示或不显示下拉区*/
    function showDiv(show) {
        var div = getDiv(divName);
        if (show) {
            div.style.visibility = "visible";
        }
        else {
            div.style.visibility = "hidden";
        }
        adjustiFrame();
    }
    /*隐藏下拉区*/
    function hideDiv() {
        showDiv(false);
    }

    /*调整iframe的位置，这是为了解决div可能会显示在输入框后面的问题*/
    function adjustiFrame() {
        if (!document.getElementById(ifName)) {
            var newNode = document.createElement("iFrame");
            newNode.setAttribute("id", ifName);
            newNode.setAttribute("src", "javascript:false;");
            newNode.setAttribute("scrolling", "0");
            newNode.setAttribute("frameborder", "0");
            document.body.appendChild(newNode);
        }
        var iFrameDiv = document.getElementById(ifName);
        var div = getDiv(divName);
        //调整ifranme的位置与div重合并在div的下一层
        try {
            iFrameDiv.style.position = "absolute";
            iFrameDiv.style.width = div.offsetWidth;
            iFrameDiv.style.height = div.offsetHeight;
            iFrameDiv.style.top = div.style.top;
            iFrameDiv.style.left = div.style.left;
            iFrameDiv.style.zIndex = div.style.zIndex - 1;
            iFrameDiv.style.visibility = div.style.visibility;
        }
        catch (e) {
        }
    }

    /*文本输入框的onkeydown响应函数*/
    function keypressHandler(evt) {
        var div = getDiv(divName);
        if (div.style.visibility == "hidden") {
            return true;
        }
        if (!evt && window.event) {
            evt = window.event;
        }
        var key = evt.keyCode;
        var KeyUp = 38;
        var KeyDown = 40;
        var KeyEnter = 13;
        var KeyTab = 9;
       // alert(key);
        if (key != KeyUp && key != KeyDown && key != KeyEnter && key != KeyTab) {
            return true;
        }
        var selNum = getSelectedSpanNum(div);
        var selSpan = setSelectedSpan(div,selNum);

        if (key == KeyEnter || key == KeyTab) {
            if (selSpan) {
                _selectResult(selSpan);
            }
            evt.cancelBubble = true;
            return false;
        }
        else {
            if (key == KeyUp) {
               //_highlightResult(selSpan);
                selSpan = setSelectedSpan(div,selNum - 1);
            }
            if (key == KeyDown) {
                // _highlightResult(selSpan);
                alert(selNum);
                if (selNum >= divLen-1) {
                    selNum = -1;
                }
               selSpan = setSelectedSpan(div,selNum + 1);
            }
            if (selSpan) {
                _highlightResult(selSpan);
            }
        }
        showDiv(true);
        return true ;
    }

    /*获取选中的条目的序号*/
    function getSelectedSpanNum(div) {
        var count = -1;
        var spans = div.getElementsByTagName("div");
        if (spans) {
            for (var i = 0; i < spans.length; i++) {
                count++;
                if (spans[i].style.backgroundColor != div.style.backgroundColor) {
                    return count;
                }
            }
        }
        return -1;
    }

    /*选择指定序号的结果条目*/
    function setSelectedSpan(div, spanNum) {
        var count = -1;
        var thisSpan;
        var spans = div.getElementsByTagName("div");
        if (spans) {
            for (var i = 0; i < spans.length; i++) {
                if (++count == spanNum) {
                    _highlightResult(spans[i]);
                    thisSpan = spans[i];
                }
                else {
                    _unhighlightResult(spans[i]);
                }
            }
        }
        return thisSpan;
    }

第二个代码：

[OperationContract]
         public string GetSingerName(string name)
         {
             string result = "";
             SingerTableAdapter singerAdp = new SingerTableAdapter();   //这是一个强类型数据类的实例
             DataTable dt = singerAdp.GetDataLikeSName(name);
             foreach (DataRow dr in dt.Rows)
             {
                 result += dr["SName"].ToString() + "|";
             }
             return result.TrimEnd('|');
         }

 

第三个（主函数）：

声明：该页面用在模板中，因此获取控件的ID的时候要用"txbsinger.ClientID” 来取得

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">
        $(function () {
            InitQueryCode('<%=txbsinger.ClientID %>');   //页面加载完后执行的，是给控件添加一些事件
        });
        function mainLoop() {
            var val = $("#<%=txbsinger.ClientID %>").val();
            if (val == "") {
                showDiv(false);            //控制下拉div是否显示的一个函数
            }
            else {
                if (lastVal != val) {

                    AdmiService.GetSingerName(val, function (data) {
                        var datas = data.split('|');
                        showQueryDiv(datas);               //把从后台返回的数据显示到下拉div中
                        lastVal = val;                            //然后用一个lastVal记录最后一次输入的文本框的值，来确定文本框值是否改变，若没有改变则不进行后台提取数据。
                    }, function () { });

                }
            }
            setTimeout("mainLoop()", 100);
                return true;
        }
    </script>

 

主页面：

<div id="divMain">

    <asp:TextBox ID="txbsinger" runat="server" ></asp:TextBox><br />
    <asp:TextBox ID="txbalbum" runat="server"></asp:TextBox>
    </div>

<!--使用wcf功能必须要添加下面的脚本管理器，否则不能找到后台提取数据的事件-->
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/Ajax/AdmiService.svc" />
        </Services>
    </asp:ScriptManager>

来源：https://www.cnblogs.com/mybook/archive/2011/04/09/2010135.html