我有一个简单的用户表,其中显示用户信息,例如他们当前的国家和省份。
<td><b>Country</b></td>
<td width="331">
<form method="post" action="">
<div id="countryList" style="vertical-align:top; display:inline-block; float:left;"><?=$country?></div>
<input type="submit" name="submitCountry" id="submitCountry" class="ui-icon ui-icon-disk" style="border:none; display:none; background-color:transparent; float:right; vertical-align:top;" />
</td>
<td width="336"> </td>
</tr>
<tr>
<td><b>Province</b></td>
<td>
<div id="provinceList" style="vertical-align:top; display:inline-block; float:left;"><?=$province?></div>
</form>
</td>
当用户点击他们的 Country 时,DIV 会转换为具有自动完成功能的输入框并向数据库发起 AJAX 请求。这允许用户输入一个国家,它将显示在列表中。
jQuery代码:
$("#countryList").click(function(){
$("#submitCountry").css("display", "inline");
//check if there are any existing input elements
if ($(this).children("input").length == 0){
//variable that contains input HTML to replace
var inputbox = "<input type='text' id='countryList' class='inputbox' name='country' value=\""+$(this).text()+"\">";
//insert the HTML intp the div
$(this).html(inputbox);
//automatically give focus to the input box
$(".inputbox").focus();
//maintain the input when it changes back to a div
$(".inputbox").blur(function(){
$("#submitCountry").css("display", "none");
var value = $(this).val();
$("#country").val(value);
$("#countryList").text(value);
});
}
//Once input box is displayed assign it the autocomplete method
$("input#countryList").autocomplete ({
//set a few options, and select source data
minLength : 2,
source : function (request, callback)
{
//variable that will carry the request 'term' from url
var data = { term : request.term };
//ajax method to call pho script
$.ajax ({
url : "getCountry.php",
data : data,
complete : function (xhr, result)
{
//if returns empty, then exit out
if (result != "success") return;
//otherwise get response and fill country array
var response = xhr.responseText;
var country = [];
//filter each li item
$(response).filter ("li").each (function ()
{
//display li item inline
country.push ($(this).text ());
});
//display country list
callback (country);
}
});
}
});
if ($("#provinceList").children("input").length == 0){
var selectbox = "<select id='selectProv' name='selectProv'></select> ";
$("#provinceList").html(selectbox);
var datastring = { term : request.term };
$.ajax({
url: "getProvince.php",
data: datastring,
success: function(html){
$(".selectProv").html(html);
}
})
}
getCountry.php 文件如下。是的,我知道,我需要保护自己免受 SQL 注入。目前我的课程还没有走那么远(我是一名学生)。
这是getCountry.php
<?php
$term = $_REQUEST["term"];
$term = utf8_decode ($term);
$dbUser = "admin";
$dbPass = "pass";
$dbName = "testdb";
$bd = mysql_connect ("localhost", $dbUser, $dbPass);
$ret = mysql_select_db ($dbName, $bd);
$query = sprintf ("SELECT * FROM Country WHERE Name LIKE '%%" . $term . "%%'", mysql_real_escape_string($term));
//send query string to DB
$result = mysql_query($query);
//if result returns a value
if ($result != NULL){
// Use the result (sent to the browser)
while ($row = mysql_fetch_assoc($result)){
echo ("<li>" . utf8_encode ($row["Name"]) . " (" . utf8_encode ($row["Code"]) . ")</li>");
}
mysql_free_result($result);
}
mysql_close ($bd);
?>
getProvince.php 此代码将用于查询数据库并生成下拉菜单。我知道这段代码有效,因为我可以导航到它,并将它传递给一个字符串,它会生成我需要的下拉列表。问题是它在整个应用程序中不起作用。
<?php
$term = $_REQUEST["term"];
$term = utf8_decode ($term);
$dbUser = "admin";
$dbPass = "pass";
$dbName = "testdb";
$bd = mysql_connect ("localhost", $dbUser, $dbPass);
$ret = mysql_select_db ($dbName, $bd);
$query = sprintf ("SELECT * FROM Country WHERE Name LIKE '%%" . $term . "%%'", mysql_real_escape_string($term));
//send query string to DB
$result = mysql_query($query);
//if result returns a value
if ($result != NULL){
$row = mysql_fetch_assoc($result);
$code = $row['Code'];
$sql = "SELECT DISTINCT District FROM City WHERE CountryCode='$code'";
$result = mysql_query($sql);
?>
<option>Select State/Province</option>
<?php while($row=mysql_fetch_array($result)){
echo "<option value=" . $row['District'] . ">" . $row['District'] . "</option>";
}
mysql_free_result($result);
}
mysql_close ($bd);
上面的代码在一定程度上有效。我能够让国家文本框正确查询数据库并执行自动完成方法,但是结果不会像我想要的那样用省份填充下拉列表!提前致谢