JavaScript onClick处理程序无法按预期工作_Javascript_Jquery_Html_Jsp

JavaScript onClick处理程序无法按预期工作

javascript jquery html jsp

JavaScript onClick处理程序无法按预期工作,javascript,jquery,html,jsp,Javascript,Jquery,Html,Jsp,我有一个关于Javascript的问题下面是我的代码 1） search.html <html> <head> <link href="styles.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript">

我有一个关于Javascript的问题

下面是我的代码

1） search.html

<html>
<head>
<link href="styles.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
    function checkSubmit(thisForm) {
        if (thisForm.last.value == '') {
            alert('Please Enter Last Name');
            return false;
        }
    }

    function lookup(inputString) {
        if (inputString.length == 0) {
            $('#suggestions').hide();
        } else {
            $.post("autocom.jsp", {
                queryString: "" + inputString + ""
            }, function (data) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            });
        }
    }

    function fill(thisValue) {
        $('#inputString').val(thisValue);
    }
</script>
<style type="text/css">
    .suggestionsBox {
        position: relative;
        top: 0px;
        left: 150px;
        width: 150px;
        border: 0px solid black;
        background-color: white;
        font-size: 75%;
    }
    .suggestionList {
        margin: 0px;
        padding: 0px;
    }
    .suggestionList div {
        margin: 0px 0px 0px 0px;
        padding: 0px;
        cursor: pointer;
    }
</style>

</head>
<body>
<form method="post" action="search.jsp" onsubmit="return checkSubmit (this);">
    Enter Last Name:
    <input type="text" name="last" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
    <input type="submit" value="Submit">

    <div class="suggestionsBox" id="suggestions" style="display: none;">
        <div class="suggestionList" id="autoSuggestionsList">
        </div>
    </div>
</form>

<form method="post" action="home.html">
    <input type="submit" id="button" value="Back To Home" mouseover="colour();">
</form>


功能检查提交（此表单）{
if（thisForm.last.value==''）{
警报（“请输入姓氏”）；
返回false；
}
}
函数查找（inputString）{
如果（inputString.length==0）{
$（“#建议”）.hide（）；
}否则{
$.post（“autocom.jsp”{
查询字符串：“”+inputString+“”
}，函数（数据）{
$（“#建议”）.show（）；
$（'#autoSuggestionsList'）.html（数据）；
});
}
}
函数填充（thisValue）{
$（'#inputString'）.val（thisValue）；
}
.建议箱{
位置：相对位置；
顶部：0px；
左：150px；
宽度：150px；
边框：0px纯黑；
背景色：白色；
字体大小：75%；
}
.建议列表{
边际：0px；
填充：0px；
}
.suggestionList分区{
保证金：0px 0px 0px 0px；
填充：0px；
光标：指针；
}
输入姓氏：

1） autocom.jsp

<%@ page language="java" import="java.sql.*" %><% 
response.setContentType("text/html");%><%
String str=request.getParameter("queryString");
int k = 0;
String connectionURL = "jdbc:mysql://localhost/jsptest";
Connection con;
Class.forName("com.mysql.jdbc.Driver").newInstance();
con = DriverManager.getConnection(connectionURL, "root", "Dummy123");  // Get a Connection to the database
Statement stm = con.createStatement();
String sql = "SELECT last FROM employees WHERE last LIKE '" +str+  "%'"; //Add the data into the database
ResultSet rs = stm.executeQuery(sql);    
while (rs.next()) {
out.println("<div onclick='fill("+rs.getString(1)+");'>"+rs.getString(1)+"</div>");
}%>

下面简要介绍一下它的工作原理。在search.html文件的“输入姓氏”字段中输入值后，javascript查找函数从autocom.jsp文件中获取数据，并通过id=autoSuggestionsList的search.html文件元素中的回调函数（数据）将其输出

实际上，我正在尝试为html表单的“输入姓氏”字段编写自动完成代码

当在“输入姓氏”字段中键入字母m后，回调函数（data）输出id=AutoSuggestionList的元素内的数据时，它将以以下形式输出，并带有html代码：

<div onclick='fill(Mattison);'>Mattison</div>
<div onclick='fill(McFagan);'>McFagan</div>
<div onclick='fill(Murphy);'>Murphy</div>
<div onclick='fill(Mux);'>Mux</div>

Mattison
麦克法根
墨菲
多路复用器

我有两个简单的问题：

1）为什么当我单击具有onclick属性的div元素时，“enterlastname”字段不会自动填充我单击的名称？我编写Javascript填充函数的方式有问题吗

2）如何使用mouseover事件处理程序突出显示下拉列表中的名称，该列表上有光标？我试过几种代码，但都不起作用

谢谢你的阅读

关于您的第一个问题，您在Fill函数中传递的参数bing中缺少引号

    <div onclick='fill("Mattison");'>Mattison</div>

Mattison

试试

onclick='fill.bind（null，“Mattison”）'

谢谢你，但是，如果你看一下代码：out.println（“+rs.getString（1）+”）；使用引号没有意义，因为rs.getString（1）是一个字符串变量。我应该添加额外的引号吗？