我有一个关于 Javascript 的问题。
下面是我的代码。
1) 搜索.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 元素中的回调函数(数据)将其输出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) 如何使用 mouseover 事件处理程序突出显示下拉列表中光标位于其上方的名称？我已经尝试了几个代码，但它不起作用。
感谢您的阅读
问候
最佳答案
对于您的第一个问题，您在 Fill 函数中传递的参数 bing 中缺少引号...
<div onclick='fill("Mattison");'>Mattison</div>
关于JavaScript onClick 处理程序无法按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23988620/