【问题标题】:Limit Number of Results for Autocomplete Based on Dropdown Selection根据下拉选择限制自动完成的结果数
【发布时间】:2013-04-16 23:45:54
【问题描述】:

我在这里试图弄清楚一些事情,似乎很接近但遇到了障碍。我的问题是,在我选择一个下拉选项(用于过滤大量结果)后,当我开始在自动完成框中输入时应该可用的结果不可用。如果我硬编码下拉列表传递的值并开始在自动完成框中输入,一切正常。只有当我传入该值时,我才会遇到问题。

我有两个 PHP 页面,一个包含包含下拉列表(其结果的 SQL)和一个自动完成框的布局,另一个包含自动完成的 SQL。

search.php

<select id="loc">
<?php
// sql for dropdown
while ($row = odbc_fetch_array($result)) {
echo "<option value\"".$row['Location']"\">".$row['Description']."</option>";
}
?>
</select>

<label for="search">Search: </label>
<input type="text" id="search" />

<script>
// Send value entered in the autocomplete box to data.php for it to be used in sql statement
$(document).ready(function(){
    $('#search').autocomplete({
        minLength: 3,
        source: function(query, process) {
            $.ajax({
                url: 'data.php',
                type: 'GET',
                data: "name=" + $('#search').val(),
                dataType: 'JSON',
                async: true,
                success: function(data) {
                    process(data);
                }
            });
        }
    });
});

// Append selected dropdown value to URL so it can be accessed
$(document).ready(function() {
    $('#search').change(function() {
        var res = $(this).val();
        location.href = "search.php?src="+res;
    });
});
</script>

data.php

<?php
if (isset($_GET['src'])) {
$loc = $_GET['src'];
$fullname = explode(" ", $_GET['name']);
$sql = "SELECT p.lastname + ', ' + p.firstname as fullname,
        l.city as city
        FROM people p
        JOIN location l on p.city = l.city
        WHERE p.lastname like '".$fullname[1]."%' AND p.firstname like '".$fullname[0]."%'
        AND l.city = '$loc'
        GROUP BY p.lastname + ', ' + p.firstname, l.city
        ORDER BY p.lastname + ', ' + p.firstname";

// DB connection and execute connection here

$array = array();
while ($row = odbc_fetch_array($db)) {
    $array[] = $row['fullname'];
}
echo json_encode($array);
}
?>


因此,当我有这样的代码并从下拉列表中选择一个选项时,它会在 select 语句中运行,因为正在传递所选值。如果我在 search.php 页面上回显结果,它们会被正确过滤,或者如果我直接导航到 data.php 页面并传入正确的参数,一切都是正确的。但是,在我做出选择并开始在自动完成框中输入内容后,我没有得到任何结果。我猜我需要根据选择以某种方式过滤结果,获取这些结果并在我开始输入时运行不同的查询?

提前感谢您的帮助,如果我有任何不清楚的地方,请告诉我。

【问题讨论】:

    标签: php jquery sql ajax autocomplete


    【解决方案1】:

    好吧,就像它通常发生的那样,在休息一下之后,我现在已经开始工作了。

    下面是带有 cmets 的修改后的代码,显示了我所做的更改。

    search.php

    <select id="loc">
    <?php
    // sql for dropdown
    while ($row = odbc_fetch_array($result)) {
    echo "<option value\"".$row['Location']"\">".$row['Description']."</option>";
    }
    ?>
    </select>
    
    <label for="search">Search: </label>
    <input type="text" id="search" />
    
    <script>
    /* Send value entered in the autocomplete box to data.php 
     * for it to be used in sql statement */
    $(document).ready(function(){
        $('#search').autocomplete({
            minLength: 3,
            source: function(query, process) {
    // Added the variable below to get the dropdown's selected value
                var res = $('#loc').val();
                $.ajax({
                    url: 'data.php',
                    type: 'GET',
    // Edited: included the dropdown value 
                    data: "src="+res + "&name=" + $('#search').val(),
                    dataType: 'JSON',
                    async: true,
                    success: function(data) {
                        process(data);
                    }
                });
            }
        });
    });
    
    /* This event is not needed since the value is set when a selection 
     * is made. 'change' passed that value to search.php causing
     * the query to run without the search value. This caused a HUGE 
     * number of results, and usually causing the page to timeout. 
     * Making sure all variables get passed prior to running the query
     * is a must. I knew this but got stuck on how to make it work. */
    // Append selected dropdown value to URL so it can be accessed
    //$(document).ready(function() {
    //    $('#search').change(function() {
    //        var res = $(this).val();
    //        location.href = "search.php?src="+res;
    //    });
    //});
    </script>
    

    data.php

    <?php
    if (isset($_GET['src'])) {
        $loc = $_GET['src'];
    }
    // Moved the $loc variable into the if statement above
    // $loc = $_GET['src'];
    $fullname = explode(" ", $_GET['name']);
    $sql = "SELECT p.lastname + ', ' + p.firstname as fullname,
            l.city as city
            FROM people p
            JOIN location l on p.city = l.city
            WHERE p.lastname like '".$fullname[1]."%' 
                  AND p.firstname like '".$fullname[0]."%'
            AND l.city = '$loc'
            GROUP BY p.lastname + ', ' + p.firstname, l.city
            ORDER BY p.lastname + ', ' + p.firstname";
    
    // DB connection and execute connection here
    
    $array = array();
    while ($row = odbc_fetch_array($db)) {
        $array[] = $row['fullname'];
    }
    echo json_encode($array);
    ?>
    


    我还没有完成主页上的几部分,例如禁用/隐藏自动完成框,直到从下拉列表中进行选择并调整查询以进行额外过滤,但这些在我的列表中。我确信还有一些其他的东西我也可以清理,但我的第一个目标是让它正常工作,现在已经完成了!

    如果有人正在使用 php 并且有几十万+的结果,并且想使用自动完成框来过滤那些结果而不等待结果显示的荒谬时间,我希望这可能会有所帮助。不像我最初想象的那么复杂,但过度认为它会对你这样做。此外,即使它现在可以正常工作,请随意添加一些建议并对任何语法错误表示歉意!

    【讨论】:

      猜你喜欢
      • 2018-07-24
      • 1970-01-01
      • 2016-07-11
      • 1970-01-01
      • 1970-01-01
      • 2012-07-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多