php - 2 个使用 jQuery 或 Ajax 的自动完成/建议输入框，第二个框基于多个项目的第一个选择

Question

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

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

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

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

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

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

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

我当前使用的脚本是 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>

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

非常感谢马克。

Answer 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> .
• 你已经完成了!

对于多选

为了让生活更轻松一点，您可以使用chosen multiselect

建议

mysql_*已弃用。使用 PDO 代替。这是 link to a tutorial