Question

下面的代码显示从数据库填充的列表（不包括DB代码）。如果我单击搜索结果，则所选选项将不会显示在文本框中。请帮忙。

下面的代码可以很好地在输入字符时显示数据库中的选项列表。问题是它不会将选定的下拉选项显示到文本框中。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Auto Complete</title>
<script src="jquery/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
$('#suggestions').hide();
} else {
$.post("states.jsp", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
}
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 13px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 260px;
margin: 0px 0px 0px 0px;
width: 200px;
background-color: #7845DD;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #DD45CD;
}
</style>
</head>
<body>
<div>
<form>
<div> <h3><font color="red">Indian States</states></font></h3>
<br /> Enter India State Name to see autocomplete
<input type="text" size="30" value="" id="inputString"
onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
</body>
</html>



<%
String name=request.getParameter("queryString");
try {
    Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver").newInstance();
    Connection con = DriverManager.getConnection("jdbc:sqlserver://localhost", "user", "password");
    Statement st=con.createStatement();
//Add the data into the database
String sql = "SELECT EMP_EMPLOYEE_ID, EMP_FNAME, EMP_LNAME FROM UAP_EMPLOYEE where EMP_FNAME     LIKE '%"+name+"%' OR EMP_LNAME LIKE '%"+name+"%';"; 
Statement stm = con.createStatement();
stm.executeQuery(sql);
ResultSet rs= stm.getResultSet();
while (rs.next ()){
out.println("<li onclick='fill("+rs.getString("EMP_FNAME")+");>"+rs.getString("EMP_FNAME")+"    </i>");
}}catch(Exception e){
out.println("Exception is ;"+e);
}
%>

Answer 1

在这一行

$('#autoSuggestionsList').html(data);

您正在设置一些我认为包含div标记列表的html以及您的自动建议。如果您希望用户能够单击列表，则需要在加载值的建议上附加click处理程序。像

$(document).ready(function() {
   $("#autoSuggestionsList div").on("click", function() {
      //put your click actions here.. load the textbox, hide the list
   });
}

on命令是实时的，这意味着它将自动绑定到动态加载的元素。

修改

由于您使用的是li而不是div，因此请将上述内容更改为

$(document).ready(function() { $("#autoSuggestionsList li").on("click", function() { fill($(this).text()); }); }

编辑2

在您添加的新代码中，此行不正确

out.println("<li onclick='fill("+rs.getString("EMP_FNAME")+");>"+rs.getString("EMP_FNAME")+" </i>");

它会产生不正确的HTML / Javascript，如下所示：

<li onclick='fill(some text);>some text</i>

您的代码应如下所示：

out.println("<li onclick='fill(\""+rs.getString("EMP_FNAME")+"\");'>"+rs.getString("EMP_FNAME")+" </li>");

它将生成以下正确的HTML / JavascriptL

<li onclick='fill("some text");'>some text</li>

jquery单击后自动搜索结果未将值更新为文本框

1 个答案: