jquery谷歌自动补全仿造 _Web前端

jquery谷歌自动补全仿制

xml.jsp代码

<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<words>
    <word>1</word>
    <word>12</word>
    <word>123</word>
     <word>1234</word>
    <word>123456</word>
    <word>1234567</word>
</words>

html代码

<html>
<head>
    <title>Ajax谷歌自动补全仿制</title>
    <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/auto.js"></script>
</head>
<body>
自动补全<input type="text" id="word"/><input type="button" value="提交">
<br> <br><br>
<div id="auto"></div>

</body>
</html>

jslib/auto.js （添加css属性也添加进了js代码中）

var gaoliang = -1;
$(document).ready(function() {
    var wordInput = $("#word");
    var offset = wordInput.offset();
    $("#auto").hide()//初始化隐藏补全框
            .css("border", "1px black solid")
            .css("position", "absolute")
            .css("top", offset.top + wordInput.height() + 5 + "px")
            .css("left", offset.left + "px")
            .width(wordInput.width());
    $("#word").keyup(function(event) {//输入框添加键盘监听事件
        var ev = event || window.event;
        var evCode = ev.keyCode;
        if (evCode >= 65 && evCode <= 90 || evCode == 8 || evCode == 46) {

            var wordText = $("#word").val();
            if (wordText.length > 0) {
                $.post("xml.jsp", {word:wordText}, function(data) {
                    var obj = $(data);//接受的xml数据变成jquery对象
                    var wordNodes = obj.find("word");//查找xml数据中word节点的值
                    var auto = $("#auto");
                    auto.html("");
                    wordNodes.each(function() {//遍历数组
                        var wordNode = $(this);
                        $("<div>").html(wordNode.text()).appendTo(auto);//遍历到的值，添加进补全框
                    });
                    if (wordNodes.length > 0) {
                        auto.show();
                    } else {
                        auto.hide();
                        gaoliang = -1;
                    }


                }, "xml");
            }

        } else if (evCode == 38 || evCode == 40) {
            if (evCode == 38) {   //向上
                var autoNodes = $("#auto").children("div");
                if (gaoliang != -1) {//是否高亮补全框中div，全局状态变量gaoliang
                    autoNodes.eq(gaoliang).css("background-color", "white");//补全框div高亮
                    gaoliang--;
                } else {
                    gaoliang = autoNodes.length - 1;
                }

                if (gaoliang == -1) {
                    gaoliang = autoNodes.length - 1;
                }
                autoNodes.eq(gaoliang).css("background-color", "red");
            }
            if (evCode == 40) {    //向下
                var autoNodes = $("#auto").children("div");
                if (gaoliang != -1) {
                    autoNodes.eq(gaoliang).css("background-color", "white");
                }
                gaoliang++;
                if (gaoliang == autoNodes.length) {
                    gaoliang = 0;
                }
                autoNodes.eq(gaoliang).css("background-color", "red");

            }
        }
        else if (evCode == 13) { //回车提交
            if (gaoliang != -1) {
                var conText = $("#auto").children("div").eq(gaoliang).text().hide();
                gaoliang = -1;
                $("#word").val(conText);
            } else {
                alert("提交的内容为:" + $("#word").val());
            }

        }
    });
    $("input[type='button']").click(function() {
        alert("提交的内容为:" + $("#word").val());
    });
});