Question

我有一个从mysql和php生成的div列表。我想使用jquery过滤器自动完成功能搜索并过滤出列表。我想通过项目$ partno进行筛选，我试图以此作为div的ID，看来这应该可以工作...

我认为是问题所在

$("div[id^="+value+"]").filter(function ()
<div id="<?php echo $partno ?>">

任何帮助将非常感谢！

<div id="main_content">

    <input id="searchInput" type="text" placeholder="Search..">

<script>
$(document).ready(function () {
    $("#searchInput").on("keyup", function () {
        var value = $(this).val().toUpperCase();
        $("div[id^="+value+"]").filter(function () {
            $(this).toggle($(this).text().toUpperCase().indexOf(value) > -1)
        });
    });
});
</script>

<?php
    while ($row = mysql_fetch_assoc($results)) {
        extract($row);
    ?>
    <div id="<?php echo $partno ?>">
        stuff inside the div
    </div>
<?php
    }
?>
</div>

Answer 1

您现在正在做的工作是获取一个ID对象以JS变量value开头的所有元素的jQuery对象，然后使用不返回选择器的函数过滤这些元素。

$().filter()应该与选择器一起用作参数。有关更多详细信息，请参见http://api.jquery.com/filter/。

然后，我不确定您要如何使用切换功能。您应该使用jQuery切换功能将持续时间和/或回调函数作为参数传递。参见http://api.jquery.com/Toggle/。

如果据我了解，如果您希望所有ID 不匹配的DIV都被键入（例如，搜索查询不是div ID的子字符串），那么您可以通过每个隐藏，如果它们不匹配，则将其隐藏。而且，如果它们匹配，则应显示它们。这里使用jQuery toggle()函数的问题在于，它不会明确隐藏或显示在快捷键上-每次输入新键时，它都会从隐藏或显示切换。

此外，由于我假设您不希望所有 DIV隐藏，如果它们的ID不匹配（例如，包括ID为main_content的DIV）），我们将为那些应过滤掉的类别提供filterable。您可以将此设置为最方便的方式。

由于这个问题是关于jQuery的，所以我将从预先填充的HTML元素开始。这是JS的工作示例。

<div id="main_content">
    <input id="searchInput" type="text" placeholder="Search..">
    <div class="filterable" id="1655">1655</div>
    <div class="filterable" id="1134">1134</div>
    <div class="filterable" id="3456">3456</div>
    <div class="filterable" id="2453">2453</div>
    <div class="filterable" id="256331">256331</div>
    <div class="filterable" id="335">335</div>
</div>
<script>
  $(document).ready(function () {
    $("#searchInput").on("keyup", function () {
      var value = $(this).val().toUpperCase();
      $(".filterable").each(function(){
        if ($(this).attr('id').toUpperCase().indexOf(value) === -1)  {
          $(this).hide();
        } else {
          $(this).show();
        }
      });
    });
  });
</script>

这是一个正在工作的小提琴，证明了这一点。 https://jsfiddle.net/nz2w0y8a/

jQuery-按通过php

1 个答案: