jquery - JavaScript onClick handler does not work as expected -
i have question regarding javascript.
below codes.
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 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"); // connection database statement stm = con.createstatement(); string sql = "select last employees last '" +str+ "%'"; //add data database resultset rs = stm.executequery(sql); while (rs.next()) { out.println("<div onclick='fill("+rs.getstring(1)+");'>"+rs.getstring(1)+"</div>"); }%> here briefly how works. after value inputted in "enter last name" field of search.html file, javascript lookup function takes data autocom.jsp file , outputs through callback function(data) in element of search.html file id=autosuggestionslist.
i trying write codes autocomplete field "enter last name" of html form.
when callback function(data) outputs data within element id=autosuggestionslist after letter m type "enter last name" field, outputted in following form, html codes:
<div onclick='fill(mattison);'>mattison</div> <div onclick='fill(mcfagan);'>mcfagan</div> <div onclick='fill(murphy);'>murphy</div> <div onclick='fill(mux);'>mux</div> i have 2 simple questions:
1) why when click on div element has onclick attribute, field "enter last name" not automatically filled name clicked on? there problem way wrote javascript fill function?
2) how can use mouseover event handler highlight name in drop-down list has cursor on it? have tried several codes, not work.
thanks reading
regards
for first question, missing quotation marks in argument bing passed in fill function...
<div onclick='fill("mattison");'>mattison</div>
Comments
Post a Comment