我尝试过很多 jquery 和 ajax 自动完成脚本。我发现很难尝试将它们中的任何一个集成到我需要的东西中。
让我解释一下我想要实现的目标。
我需要 2 个自动完成框。第二个从第一个中提取数据。它们还必须都支持多个条目。查询数据库中的数据。我现在使用本地数据,但将来可以更改它。
我们将使用州和城市作为示例。
我有一个 mysql 数据库,它包含:- id、州、城市。
我使用 JSON 格式来提取结果。
因此,如果我们在第一个框中选择 2 个州。我在西班牙,所以说马拉加和加的斯。
然后,在城市的第二个自动完成框中,它不会查询所有城市的数据库,而是仅提供马拉加和加的斯城市的结果。
我使用过的脚本似乎都没有足够详细的解释来帮助我实现这一目标。我对 PHP 非常熟悉,但对于 JS-jQuery/JSON/Ajax 来说我完全是菜鸟。我取得了进展,我可以让第一个自动完成框工作并拉出两个状态,但在那之后我似乎无法取得任何进展。
我当前使用的脚本是 Drew Wilsons Auto 建议的。http://code.drewwilson.com/entry/autosuggest-jquery-plugin http://code.drewwilson.com/entry/autosuggest-jquery-plugin
如果我想要实现的目标可以用这个脚本来完成,那就太好了。我也愿意接受其他建议脚本或想法。
这是我的 php 脚本中的一些代码。 (p3.php)它无法按照我需要的方式工作,因为我似乎被困在某个地方。但它确实选择了多个州!至少是一个好的开始。
<?php
// DB connection details (removed from here)
//DB Connection
$dblink_main = mysql_connect($host_main,$user_main,$pass_main);
$selectdb_main=mysql_select_db($database_main,$dblink_main);
// changed default q in autosuggest.php!
$input = $_GET["plkup"];
//$input2 = $_GET["clkup"];
//$province2 = $_GET["province2"];
//$province = 'Cadiz';
//$province2 = "Cadiz";
$data = array();
// query your DataBase here looking for a match
$query = mysql_query("SELECT distinct province FROM spanish_regions WHERE province LIKE '%$input%'");
// query 2 - doing this wrong!
//$query2 = mysql_query("SELECT city, province FROM spanish_regions WHERE province LIKE '%$input2%'");
while ($row = mysql_fetch_assoc($query)) {
$json = array();
$json['province'] = $row['province'];
$data[] = $json;
}
//while ($row = mysql_fetch_assoc($query2)) {
//$json = array();
//$json['city'] = $row['city'];
//$data[] = $json;
//}
header("Content-type: application/json");
echo json_encode($data);
?>
HTML 代码。
<form action="">
<label>Province: </label><input type="text" id="province" name="" size="20" value="" autocomplete="off" />
</form>
<form action="">
<label>City: </label><input type="text" id="city" name="" size="20" value="" autocomplete="off" />
</form>
<script language="javascript" type="text/javascript">
jQuery(function(){
jQuery( "#province" ).autoSuggest("p3.php", {selectedItemProp: "province", selectedValuesProp: "province", searchObjProps: "province", queryParam: "plkup", minChars: 1, matchCase: false});
});
// Below does not work. Again I am probably going around this wrong way.
jQuery(function(){
jQuery( "#city" ).autoSuggest("p3.php", {selectedItemProp: "city", selectedValuesProp: "city", searchObjProps: "city", minChars: 1, queryParam: "clkup", matchCase: false});
});
</script>
我真的不知道如何让第二个自动完成框仅通过第一个选择的状态从数据库过滤中获取数据。
任何想法、解决方案或想法将不胜感激。
非常感谢
标记。