Question

我有两种自定义帖子类型，ads和bedrooms。

我创建了一个自定义搜索表单，其中包含一个选择框：

<select name="bedrooms" id="bedrooms>
    <option value="1" selected="selected">1 bed+</option>
    <option value="2">2 beds+</option>
    <option value="3">3 beds+</option>
</select>

如何关联它，以便当用户搜索2 beds+时，它会显示所有包含2间卧室或更多卧室的广告？

Answer 1

首先，您要提取用户选择的（最小）床位数。要做到这一点，你需要一些javascript（或jQuery, which is what I recommend）。

这是监视select元素值要更改的代码。可能你不会使用事件，但代码会告诉你如何读取控件的值（以及如何正确使用selected属性）：

jsFiddle Demo

<强> HTML：

<select name="bedrooms" id="bedrooms">
    <option value="0" selected>Choose One:</option>
    <option value="1">1 bed+</option>
    <option value="2">2 beds+</option>
    <option value="3">3 beds+</option>
</select>
<div id="resultsDiv"></div>

<强>的javascript / jQuery的：

$('#bedrooms').change(function() {
    var beds = $(this).val();
    alert('Minimum beds: ' + beds);
});

将（最小）床位数保存到变量后，您可以使用AJAX向服务器发送请求以执行搜索并返回结果：

$.ajax({
    type: "POST",
    url: "somephpfilename.php",
    data: 'num_beds=' + beds,
    success: function(recd){
        $('#resultsDiv').html(recd);
    }
});

以上内容将变量beds的内容发送到PHP端，重命名为num_beds。我更改了var名称，以便您可以看到名称如何匹配。在PHP方面，检索床的数量为：$_POST['num_beds']

然后，您可以执行mysql搜索并在变量中构建一些HTML代码。完成后，只需回显该变量。（请注意，我使用$out .= "more stuff";附加到变量内容，然后在完成后使用echo变量。

PHP： somephpfilename.php

$min_beds = $_POST['num_beds'];
$query = "SELECT * IN `yourtablename` WHERE `cp_bedrooms` > '$min_beds' ORDER BY `cp_bedrooms`";
$results = mysql_query($query) or die(mysql_error());

$out = '
    <table id="foundApts">
        <tr>
            <th>Num Beds</th>
            <th>Address</th>
            <th>Contact Phone</th>
            <th>Rent</th>
        </tr>
    ';

while ($row = mysql_fetch_assoc($results){
    $out .= '
        <tr>
            <td>' .$row['cp_bedrooms']. '</td>
            <td>' .$row['address_field_name']. '</td>
            <td>' .$row['phonenum_field_name']. '</td>
            <td>' .$row['rentprice_field_name']. '</td>
        </tr>
    ';
}

$out .= '</table>';

echo $out;

PHP回显的内容（即$out变量的内容 - 在PHP端构建的HTML）在名为{{的变量的AJAX success:函数内部接收。 1}}。只需将该变量写入结果div，您将看到完整构造的结果表。 请注意，您必须在<{em>内部 recd函数中执行此操作。您会发现此函数之外的success:变量不存在。

这是一个jsFiddle的非工作链接，其中包含所有内容。请注意，它不起作用，因为jsFiddles不能执行AJAX，并且没有地方放置PHP （我只是在注释中添加了PHP，但它应该保存到PHP文件系统上的文件中）。 / em>只需观察代码的构造方式。

jsFiddle Code Sample

以下是一些关于AJAX / PHP的附加说明：

How to use jQuery in your code（您只需要包含jQuery库，如recd所示）

Simple intro to AJAX

Wordpress自定义字段选择框搜索“至少”值

1 个答案: