0

以下のコードは、データベースから入力されたリストを表示します（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);
}
%>
4

1 に答える 1

0

この行で

$('#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>

于 2012-08-11T21:47:14.807 に答える