自己实现的auto complete

lostyue 发表于 2011-12-21 08:44

<DIV>
<DIV id=codeText class=codeText>
<OL style="PADDING-BOTTOM: 5px; MARGIN: 0px 1px 0px 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 5px" class=dp-css>
<LI>var xmlHttp; </LI>
<LI>    var popupdiv; </LI>
<LI>    var nameTable; </LI>
<LI>    var nameTableBody; </LI>
<LI>    var inputfield; </LI>
<LI>    var otherfield; </LI>
<LI> </LI>
<LI>    function myinitialization(){ </LI>
<LI>        if(!popupdiv){ </LI>
<LI>            popupdiv = document.createElement("DIV"); </LI>
<LI>            nameTable = document.createElement("TABLE"); </LI>
<LI>            nameTableBody = document.createElement("TBODY"); </LI>
<LI>             </LI>
<LI>            nameTable.appendChild(nameTableBody); </LI>
<LI>            popupdiv.appendChild(nameTable); </LI>
<LI>            document.body.appendChild(popupdiv); </LI>
<LI>        } </LI>
<LI>    } </LI>
<LI> </LI>
<LI>    function setPosition(inputfield){ </LI>
<LI>        if(popupdiv){ </LI>
<LI>            //position </LI>
<LI> </LI>
<LI>            var end = inputfield.offsetWidth; </LI>
<LI>     var left = calculateOffsetLeft(inputfield); </LI>
<LI>     var top = calculateOffsetTop(inputfield) + inputfield.offsetHeight; </LI>
<LI> </LI>
<LI>     popupdiv.style.display = "block"; </LI>
<LI>     popupdiv.style.border = "black 1px solid"; </LI>
<LI>     popupdiv.style.left = left + "px"; </LI>
<LI>     popupdiv.style.top = top + "px"; </LI>
<LI>             </LI>
<LI>            popupdiv.style.width = "300px"; </LI>
<LI>            popupdiv.style.height = "200px"; </LI>
<LI>            popupdiv.style.overflowX = "hidden"; </LI>
<LI>            popupdiv.style.overflowY = "auto"; </LI>
<LI>            popupdiv.style.position = "absolute"; </LI>
<LI>            popupdiv.style.backgroundColor = "#FFFAFA"; </LI>
<LI> </LI>
<LI>            nameTable.style.width = "100%"; </LI>
<LI>            } </LI>
<LI>        } </LI>
<LI> </LI>
<LI>/*    function sendRequest(){ </LI>
<LI>        inputfield = document.getElementById("inputname"); </LI>
<LI>        myinitialization(); </LI>
<LI>         </LI>
<LI>        if(inputfield.value.length > 0){ </LI>
<LI>            xmlHttp = new XMLHttpRequest(); </LI>
<LI>            xmlHttp.onreadystatechange = handleStateChange; </LI>
<LI>            var queryString = "home?inputname=" + escape(inputfield.value); </LI>
<LI> </LI>
<LI>            xmlHttp.open("POST", queryString, true); </LI>
<LI>            xmlHttp.send(); </LI>
<LI>        }else{ </LI>
<LI>            clearNames(); </LI>
<LI>            } </LI>
<LI>        } */ </LI>
<LI> </LI>
<LI>/*    function handleStateChange() { </LI>
<LI>        if(xmlHttp.readyState == 4) { </LI>
<LI>            if(xmlHttp.status == 200) { </LI>
<LI>                //nameTable.focus(); </LI>
<LI>                setNames(xmlHttp.respon***ML.getElementsByTagName("emsuser"), inputfield); </LI>
<LI>                }else if (xmlHttp.status == 204){ </LI>
<LI>                    clearNames(); </LI>
<LI>                } </LI>
<LI>            } </LI>
<LI>    }*/ </LI>
<LI>     </LI>
<LI>        function handleStateChange() { </LI>
<LI>            if(xmlHttp.readyState == 4) { </LI>
<LI>                if(xmlHttp.status == 200) { </LI>
<LI>                    //nameTable.focus(); </LI>
<LI> </LI>
<LI>                    //var inputfield = document.getElementById("associateId"); </LI>
<LI> </LI>
<LI>                    //var otherfield = document.getElementById("associateName"); </LI>
<LI> </LI>
<LI>                    var myusers = xmlHttp.respon***ML.getElementsByTagName("emsuser"); </LI>
<LI>                    if(myusers.length > 0){ </LI>
<LI>                        setNames(myusers, inputfield, otherfield); </LI>
<LI>                    } </LI>
<LI>                    else{ </LI>
<LI>                        clearNames(); </LI>
<LI>                    } </LI>
<LI>                    } </LI>
<LI>                } </LI>
<LI>        } </LI>
<LI> </LI>
<LI>    function setNames(the_names, inputfield, otherfield) { </LI>
<LI>        clearNames(); </LI>
<LI>        var size = the_names.length; </LI>
<LI>        //setOffsets(); </LI>
<LI> </LI>
<LI>        setPosition(inputfield); </LI>
<LI>        var row, cell, txtNode; </LI>
<LI>        for (var i = 0; i < size; i++) { </LI>
<LI>            var empname = the_names[i].getElementsByTagName("empname"); </LI>
<LI>            var empid = the_names[i].getElementsByTagName("empid"); </LI>
<LI>             </LI>
<LI>             var nextNode = empname[0].firstChild.data + "(" + empid[0].firstChild.data + ")"; </LI>
<LI>             row = document.createElement("tr"); </LI>
<LI>             cell = document.createElement("td"); </LI>
<LI> </LI>
<LI>             row.style.cursor = "pointer"; </LI>
<LI>             //fuck css </LI>
<LI> </LI>
<LI>             cell.className = "mytd"; </LI>
<LI> </LI>
<LI>             cell.onmouseout = function() {this.className='mouseOver';}; </LI>
<LI>             cell.onmouseover = function() {this.className='mouseOut';}; </LI>
<LI> </LI>
<LI>             cell.setAttribute("bgcolor", "#FFFAFA"); </LI>
<LI>             cell.setAttribute("border", "0"); </LI>
<LI>                             </LI>
<LI>             cell.onclick = function() { populateName(this, inputfield, otherfield); } ; </LI>
<LI>             txtNode = document.createTextNode(nextNode); </LI>
<LI>                              </LI>
<LI>             cell.appendChild(txtNode); </LI>
<LI>             row.appendChild(cell); </LI>
<LI>             nameTableBody.appendChild(row); </LI>
<LI>             } </LI>
<LI>        } </LI>
<LI> </LI>
<LI>    function calculateOffsetLeft(field) { </LI>
<LI>        return calculateOffset(field, "offsetLeft"); </LI>
<LI>        } </LI>
<LI> </LI>
<LI>    function calculateOffsetTop(field) { </LI>
<LI>        return calculateOffset(field, "offsetTop"); </LI>
<LI>        } </LI>
<LI> </LI>
<LI>    function calculateOffset(field, attr) { </LI>
<LI>        var offset = 0; </LI>
<LI>        while(field) { </LI>
<LI>            offset += field[attr]; </LI>
<LI>            field = field.offsetParent; </LI>
<LI>            } </LI>
<LI>        return offset; </LI>
<LI>       } </LI>
<LI> </LI>
<LI>    function populateName(cell, inputfield, otherfield) { </LI>
<LI>        var selectedvalue = cell.firstChild.nodeValue; </LI>
<LI>        if(inputfield.id == "ajaxwon"){ </LI>
<LI>            otherfield.value = selectedvalue.substring(0, selectedvalue.length - 9); </LI>
<LI>            inputfield.value = selectedvalue.substring(selectedvalue.length - 8, selectedvalue.length -1); </LI>
<LI>        }else{ </LI>
<LI>            inputfield.value = selectedvalue.substring(0, selectedvalue.length - 8); </LI>
<LI>            otherfield.value = selectedvalue.substring(selectedvalue.length - 7, selectedvalue.length -1); </LI>
<LI>        } </LI>
<LI>        clearNames(); </LI>
<LI>    } </LI>
<LI> </LI>
<LI>    function clearNames() { </LI>
<LI>        var ind = nameTableBody.childNodes.length; </LI>
<LI>        for (var i = ind - 1; i >= 0 ; i--) { </LI>
<LI>            nameTableBody.removeChild(nameTableBody.childNodes[i]); } </LI>
<LI>        popupdiv.style.display = "none"; </LI>
<LI>        }</LI></OL></DIV></DIV>
<DIV> </DIV>
<DIV>
<DIV id=codeText class=codeText>
<OL style="PADDING-BOTTOM: 5px; MARGIN: 0px 1px 0px 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 5px" class=dp-css>
<LI>function rrsendRequest(){ </LI>
<LI>        inputfield = document.getElementById("ajaxempName"); </LI>
<LI>        otherfield = document.getElementById("empNo"); </LI>
<LI>         </LI>
<LI>        myinitialization(); </LI>
<LI>        if(inputfield.value.length > 0){ </LI>
<LI>            xmlHttp = new XMLHttpRequest(); </LI>
<LI>            xmlHttp.onreadystatechange = handleStateChange; </LI>
<LI>            var queryString = "<%=base %>/AjaxSearchAction.do?inputname=" + escape(inputfield.value); </LI>
<LI> </LI>
<LI>            xmlHttp.open("POST", queryString, true); </LI>
<LI>            xmlHttp.send(); </LI>
<LI>        }else{ </LI>
<LI>            clearNames(); </LI>
<LI>            } </LI>
<LI>        }</LI></OL></DIV></DIV>

页: [1]

Chinaunix's Archiver

自己实现的auto complete