Question

我对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>

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文件中获取数据，并通过search.html元素中的回调函数（data）输出文件id = autoSuggestionsList。

我实际上是在为html表单的“输入姓氏”字段编写自动填充代码。

当回调函数（数据）在字母m键入“输入姓氏”字段后输出id = autoSuggestionsList的元素内的数据时，它将以下列形式输出，带有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>

我有两个简单的问题：

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

2）如何使用鼠标悬停事件处理程序突出显示下拉列表中有光标的名称？我尝试了几个代码，但它不起作用。

感谢您阅读

此致

Answer 1

对于您的第一个问题，您在填充函数中传递的参数bing中缺少引号...

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

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

1 个答案: