Question

如何从数据库中创建一个类似搜索数据的过滤器，如果该过滤器已经存在则显示某个元素或显示警报脚本。

示例我有此代码。

注意：*输入内容在表单内。

<div>
  <input type="text" id="key"><span id="alert" style="display:none;">Data already exist</span>
</div>

这是在上面输入的输入标签上比较数据的地方。

注意：*假定代码和元素已正确编码。

<?php foreach(getData() as $row)
{?>
  <tr class="data">
    <td><?php echo $row['samp1'];?></td>

  </tr>
<?php }?>

如果数据存在，基本上在输入字段旁边显示警告警报。

如果找到此代码

$("#key").on("keyup",function(){
  var val = $(this).val();

  $(".tr").filter(function(){
    $(this).toggle($(this).text().indexOf(val) > -1)
  });
});

应该是这样，但tr是用于比较。

我想要的是，当找到数据时，span标签会显示。

Answer 1

我认为对此问题还有另一种解决方法，那就是简化得多：仅使用PHP输出数据常量，然后使用jQuery将其包装在表中。这样，您就可以以更加灵活的方式处理数据（及其表示）。

这是我想到的摘录：

// only rowData should be echoed with PHP

const rowData = [
  10,
  12,
  15,
  67
];

// displaying the table of data
$.each(rowData, function(i, el) {
  var row = '';
  row += '<tr><td>';
  row += el;
  row += '</td></tr>';
  $("#data-table").append(row);
});


// handling input and validation
$("#key").on("keyup", function() {

  var val = $(this).val();

  // native ES6 array.find syntax 
  var found = rowData.find(item => item == val);

  // displaying / hiding the alert
  if (typeof found !== 'undefined') {
    $("#alert").css("display", "block");
  } else {
    $("#alert").css("display", "none");
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" id="key"><span id="alert" style="display:none;">Data already exist</span>
</div>
<table id="data-table">
</table>

如果发现数据则显示警报-JQUERY

1 个答案: