JQueryUI 自动完成 - 使用先前的字段值作为不同字段的条件

Question

我正在尝试有两个自动完成的字段。第一个有效，因为它是自动完成的直接示例。第二个字段的自动完成验证包括第一个字段的值作为查询中的条件。我一直在追查这个问题，我不确定我的问题是 Jquery 还是 PHP。

HTML 和 Jquery

  <form action='' method='post'>
    <p><label>Country:</label><input type='text' id='country' name='country' value='' class='auto'></p>
    <p><label>State:</label><input type='text' id='state' name='state' value='' class='auto'></p>
  </form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>    
<script type="text/javascript">
$(function() {
    $("#country.auto").autocomplete({
        source: "search.php",
        minLength: 1,
        change: function (event, ui){
            if (!ui.item) {
                this.value = '';
            }
        }
    }); 
});
</script>
<script>
$(function(){
    $("#state.auto").autocomplete({
        source: "statesearch.php?country=" + $("#country.auto").val(),
        minLength: 1,
        change: function (event, ui){
            if (!ui.item) {
                this.value = '';
            }
        }
    }); 


});
</script>

PHP 第二个字段（第一个工作正常）：

$country = $_GET['country'];

if (isset($_GET['term'])){
    $return_arr = array();

    try {
        $conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $conn->prepare('SELECT state FROM states WHERE state LIKE :term and country ='.$country);
        $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

        while($row = $stmt->fetch()) {
            $return_arr[] =  $row['state'];
        }

    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }


    /* Toss back results as json encoded array. */
    echo json_encode($return_arr);
}

数据库中的州table很简单，三列，ID，国家，州

提前感谢您提供的任何线索或步骤。

Answer 1

将您的代码更改为：

<script>
val country_selected = $("#country").val()
Alert(country_selected);
$(function(){
    $("#state").autocomplete({
        source: "statesearch.php?country=" + country_selected,
        minLength: 1,
        change: function (event, ui){
            if (!ui.item) {
                this.value = '';
            }
        }
    }); 


});
</script>

请告诉我们是否使用正确的 url 调用了 statesearch.php 页面。请注意，如果您通过 ID（例如#country）引用项目，则无需进一步详细说明选择。 ID 是唯一的

Answer 2

根据 API 指南，您需要在当前 jqueryui 版本中使用函数源来执行此操作：https://api.jqueryui.com/autocomplete/#option-source

    $(function(){
    $("#state").autocomplete({
        //source: "statesearch.php?country="+country_selection,
        source: function(request, response) {
        $.ajax({
          url: "statesearch.php",
          data: {
            country : $("#country").val(),
            term : request.term
          },
          dataType: "json",
          success: function( data ) {
            response( data )
          }
        });
    },
        minLength: 1,
        change: function (event, ui){
            if (!ui.item) {
                this.value = '';
            }
        }
    }); 
});

JQueryUI 自动完成 - 使用先前的字段值作为不同字段的条件

JQueryUI Autocomplete - use previous field value as a condition on a different field

php

jquery

jquery-ui

autocomplete