0

我尝试了许多 jquery 和 ajax 自动完成脚本。我发现很难尝试将它们中的任何一个集成到我需要的东西中。

让我解释一下我想要实现的目标。

我需要 2 个自动完成框。第二个从第一个中提取数据。此外，它们都必须支持多个条目。查询数据库以获取数据。我现在使用本地数据，但将来可以更改。

我们将使用州和城市作为示例。

我有一个 mysql 数据库，它包含：- id、state、city。我使用 JSON 格式来提取结果。

因此，如果我们在第一个框中选择 2 个州。我在西班牙，所以说马拉加和加的斯。然后在城市的第二个自动完成框中，而不是查询我的所有城市的数据库，它只给出马拉加和加的斯城市的结果。

我使用的所有脚本似乎都没有足够详细的解释来实现这一点。我对 PHP 非常熟悉，但在 JS-jQuery/JSON/Ajax 方面完全是个菜鸟。我取得了进展，我可以让第一个自动完成框工作并拉动 2 个状态，但在那之后我似乎无法取得任何进展。

我目前使用的脚本是 Drew Wilsons Auto 建议。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>

我真的不确定如何让第二个自动完成框仅通过第一个选择的状态从数据库过滤中获取数据。任何想法或解决方案或想法将不胜感激。

非常感谢马克。

4

1 回答 1

1

这是一个非常简单的程序。我将只显示主要骨架。添加快速肉类将由您负责。

假设我们有两个这样<select>的：ajax.php

   <select id="parent">
        <option value="1">value1</option>
        <option value="2">value2</option>
        <option value="3">value3</option>
        <option value="4">value4</option>
    </select>

    <select id="child">

    </select>

那么我们需要什么？我们需要填充<select>其选择的第二个事件。

这是javascript部分（ajax.php）

<script type="text/javascript">
            $(function(){                    
                $('#parent').change(function(){ //on change event
                var parentVal = $('#parent').val(); //<----- get the value from the parent select
                $.ajax({
                    url     : 'process.php', //the url you are sending datas to which will again send the result
                    type    : 'GET', //type of request, GET or POST
                    data    : { parentValue: parentVal}, //Data you are sending
                    success : function(data){$('#child').html(data)}, // On success, it will populate the 2nd select
                    error   : function(){alert('an error has occured')} //error message
                })
            })

            })
    </script>

这会将请求发送到process.php

现在来了process.php

这里我们需要数据来填充第二个<select>

现在里面有<select>什么？

<option value="someValue">someText</option>

您需要输出如下内容：

    <option value="11">value11</option>
    <option value="12">value12</option>
    <option value="13">value13</option>
    <option value="14">value14</option>

值和里面的文字填满了你的需要。

因为它将来自数据库：

  • 您可以process.php使用$_GET['parentValue']
  • 使用该值，查询数据库
  • 然后从数据库返回的结果中，使用循环while，foreach或者for（取决于您检索它的方式），制作 <option value="someValue">someText</option>.
  • 你完成了！

对于多选

为了让生活更轻松，您可以使用选择的多选

一个建议

mysql_*已弃用。改用 PDO。这是一个教程的链接

于 2012-11-14T14:35:23.647 回答