我已经为我的php代码自动完成了usign ajax.I使用此代码自动完成一个fileld.Can我使用相同的代码自动完成多个字段...
代码包含ajax代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete.....</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString)
{
if(inputString.length == 0)
{
// Hide the suggestion box.
$('#suggestions').hide();
}
else
{
$.post("rpc.php", {queryString: ""+inputString+""}, function(data)
{
if(data.length >0)
{
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue)
{
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body
{
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3
{
margin: 0px;
padding: 0px;
}
.suggestionsBox
{
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-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: #659CD8;
}
</style>
</head>
<body>
<div>
<form>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
</body>
</html>
数据库连接页面的代码是
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("name",$con);
if(!$con)
{
echo 'ERROR: Could not connect to the database.';
}
else
{
if(isset($_POST['queryString']))
{
$queryString = mysql_real_escape_string($_POST['queryString']);
if(strlen($queryString) >0)
{
$query = mysql_query("SELECT cname FROM country WHERE cname LIKE '$queryString%' LIMIT 10");
if($query)
{
while($result= mysql_fetch_object($query))
{
echo '<li onClick="fill(\''.$result->cname.'\');">'.$result->cname.'</li>';
}
}
else
{
echo 'ERROR: There was a problem with the query.';
}
}
else
{
// Dont do anything.
}
}
else
{
echo 'There should be no direct access to this script!';
}
}
?>
答案 0 :(得分：1)
是的，您可以使用该代码自动填充多个字段。
<强> HTML：
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill(this);" />
<input type="text" size="30" value="" id="inputString2" onkeyup="lookup(this.value);" onblur="fill(this);" />
<input type="text" size="30" value="" id="inputString3" onkeyup="lookup(this.value);" onblur="fill(this);" />
<强>使用Javascript：
function fill(element,thisValue)
{
element.value = thisValue;
setTimeout("$('#suggestions').hide();", 200);
}
<强> HTML：
<input type="text" size="30" value="" class="autoupdate" name="field1" />
<input type="text" size="30" value="" class="autoupdate" name="field2" />
<input type="text" size="30" value="" class="autoupdate" name="field3" />
Javascript（使用jQuery 1.2.1）：
// fill on blur!
$(".autoupdate").blur(function()
{
$(this).val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
});
// lookup value onkeyup!
$(".autoupdate").keypress(function()
{
var fieldvalue = $(this).val();
if ( fieldvalue.length > 0 )
{
// hide selections box
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+fieldvalue+""}, function(data)
{
if(data.length >0)
{
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
});
在您按键时不需要AJAX一个URL。如果你不介意额外的第二次自动填充;最好提交PHP表单 onblur 。此外，您还可以利用JSON并在一次单独的AJAX调用中获取所需的所有数据，最终结果使表单的足迹具有1个AJAX调用和1个MySQL数据库查询。否则，您只需在每个被触发的 keyup 事件上敲击服务器。
- 或 -
或者，您可以在提交PHP表单之前设置等待2-3秒的延迟。然后还需要确保在额外的按键时清除setTimeout，以防止不必要的延迟AJAX调用堆积。
答案 1 :(得分：0)
所以这一切都取决于你的要求，我没有看到需要一个字段的自动完成将有助于自动填充同一页面中的另一个字段..此外，用户输入相同字符串的机会是多少.. < / p>
说过你可以很聪明并将服务器的响应存储在一个关联数组中，并在调用服务器之前先检查这个关联数组，看看你是否可以提供数据，但为此我会建议你从服务器存储JSON数据并使用javascript（例如模板）构建HTML。您仍然可以将html存储在关联数组中，但html可能会根据您的文本框而改变。
代码可能如下所示：
<script type="text/javascript">
var searchResults=[];
function lookup(inputString)
{
if(inputString.length == 0)
{
// Hide the suggestion box.
$('#suggestions').hide();
}
else if(searchResults[inputString])
{
$('#suggestions').show();
$('#autoSuggestionsList').html(searchResults[inputString]);
}
{
$.post("rpc.php", {queryString: ""+inputString+""}, function(data)
{
if(data.length >0)
{
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue)
{
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
显然你需要更改你的选择器/或根据你想给自动提供的字段更改div等的偏移量。
希望这有帮助。