显示实时搜索AJAX的结果

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

复选框正在工作，因此当您选中文本框时，页面上的结果将被实时过滤。现在我想要同样的文本框，但我坚持怎么做。

这是我为我使用的文本框编写的代码，我也想将其用于文本框。

<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);
?>

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

只要"input"元素发生更改（基本上只要用户键入），第一块代码simple就会调用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、fggcatr等的结果。本质上是任何包含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);

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

如果是的话，我会做一些类似的事情

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

相关内容

最新更新

热门标签：