Question

我有一个显示数据库所有结果的页面，我在页面上有复选框和文本框，用于过滤页面上的结果。

复选框正常工作，因此当您检查文本框时，页面上的结果会被实时过滤。现在我希望文本框也一样，但我不知道怎么做。

这是我使用的文本框的代码，我也想用于文本框。

<script>
function makeTable(data) {
    var tbl_body = "";
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
            tbl_row += "<td>"+v+"</td>";
        })
        tbl_body += "<tr>"+tbl_row+"</tr>";
    })
    return tbl_body;
}

function getEmployeeFilterOptions(){
    var opts = [];
    $checkboxes.each(function(){
        if(this.checked){
            opts.push(this.name);
        }
    });
    return opts;
}

function updateEmployees(opts){
    $.ajax({
        type: "POST",
        url: "submit.php",
        dataType : 'json',
        cache: false,
        data: {filterOpts: opts},
        success: function(records){
            $('#employees tbody').html(makeTable(records));
        }
    });
}

var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
    var opts = getEmployeeFilterOptions();
    updateEmployees(opts);
});

updateEmployees();

</script>

PHP

<?php 
$pdo = new PDO('mysql:host=localhost;dbname=records', 'root', '***');
$select = 'SELECT *';
$from = ' FROM overboekingen';
$opts = (isset($_POST['filterOpts']) ? $_POST['filterOpts'] : FALSE);

  if (is_array($opts))  {

    $where = ' WHERE FALSE';

  if (in_array("medewerker", $opts)){
    $where .= " OR medewerker = 1 ";
  }  
  if (in_array("medewerker1", $opts)){
    $where .= " OR medewerker = 2 ";
  }  
  if (in_array("medewerker2", $opts)){
    $where .= " OR medewerker = 3 ";
  }  
  if (in_array("medewerker3", $opts)){
    $where .= " OR medewerker = 4 ";
  }  
  if (in_array("medewerker4", $opts)){
    $where .= " OR medewerker = 5 ";
  }  
  if (in_array("medewerker5", $opts)){
    $where .= " OR medewerker = 6 ";
  }  
  if (in_array("medewerker6", $opts)){
    $where .= " OR medewerker = 7 ";
  }  
  if (in_array("medewerker7", $opts)){
    $where .= " OR medewerker = 8 ";
  }  
  if (in_array("medewerker8", $opts)){
    $where .= " OR medewerker = 9 ";
  }  
  if (in_array("medewerker9", $opts)){
    $where .= " OR medewerker = 10 ";
  }  
  if (in_array("medewerker10", $opts)){
    $where .= " OR medewerker = 11 ";
  }

else {
$where = false;     
}

$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);
?>

Answer 1

我不确定你的submit.php是如何工作的，但是我假设你可以发送关键字作为“filterOpts”并返回正确的JSON？如果这是正确的，您可以在用户更改输入字段时进行AJAX调用，并且每次都发送输入值：

只要“input”元素发生更改（基本上只要用户输入），第一个代码块就会调用updateEmployeesText函数。请注意，我们将$（this）.val作为参数传递，该参数是文本框中的文本。

$('input').change(function(){
    updateEmployeesText($(this).val()); 
});

这段代码异步调用submit.php。它将文本框的值作为POST参数传递。在submit.php返回后，执行成功函数并更新表。

function updateEmployeesText(val){
    $.ajax({
        type: "POST",
        url: "submit.php",
        dataType : 'json',
        cache: false,
        data: {text: val},
        success: function(records){
            $('#employees tbody').html(makeTable(records));
        }
    }); 
}

在PHP中，您现在可以使用$ val = $ _POST ['text']获取该值。这是您要在数据库中搜索的字符串。我概述了以下步骤：

建立PDO（已经完成）
现在使用SELECT * FROM your_table WHERE your_field LIKE'％。 $ val。％'或......（你可以坚持下去）
注意：开头和结尾的％会进行部分搜索，因此也会返回val之前或之后的任何内容
现在执行语句并获取数组
将数组编码为JSON并返回！

希望这有帮助！

PHP编辑：这段代码完成了上述所有操作。请注意SQL LIKE语句中使用的部分搜索。％表示$ val之前或之后的通配符。例如，如果值为'cat'，则脚本将搜索％cat％，这将返回bcat，cat，fcatr，fggcatrr等的结果...基本上包含cat的任何内容。如果你想要一个以cat结尾的脚本你会使用'％cat'（％$ val），如果你想要以cat开头的东西，你会使用'cat％'（％$ val）。

$pdo = new PDO('mysql:host=localhost;dbname=records', 'root', '***');
$select = 'SELECT *';
$from = ' FROM overboekingen';
$val = $_POST['val'];
$where = "WHERE medewerker LIKE '%$val%';
$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);

Answer 2

不知道我是否明白你的意思，你想在输入和复选框上都有ajax live功能吗？

如果是这样，我会做类似

的事情

$('yourinputselector').keyup(function() {

   var user_input = $(this).val();
   if (user_input.length > 3) // or any min-chars number
   {  
      // process your ajax request here
   }

});

显示实时搜索AJAX的结果

2 个答案: