Question

我正在尝试为一个非常简单的网站制作搜索栏。我有三个页面：主页，列表和联系人。每个页面的标题都相同。它包含一个搜索栏。我有一个非常好的代码片段，在可搜索列表的同一页面中完美地工作，但我无法弄清楚如何使其从其他两个页面起作用。到目前为止，我有：

标题的HTML：

<form id="search" action="katalogs" method="POST">
    <fieldset>
        <input type="text" id="filter" name="filter" value="" />
        <span id="filter-word"></span>
    </fieldset>
</form>

HTML列表：

<ul>
    <li>List item red</li>
    <li>List item yellow</li>
    <li>List item blue</li>
    <li>List item green</li>
    <li>List item gray</li>
    <li>List item pink</li>
    <li>List item aqua</li>
    <li>List item brown</li>
    <li>List item orange</li>
    <li>List item purple</li>
</ul>

JS代码：

$(document).ready(function(){
    $("#filter").keyup(function(){ 

        var filter = $(this).val(), count = 0;

        $("ul li").each(function(){

            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).css("opacity", "0.5");

            } else {
                $(this).css("opacity", "1");
            }
        });

        var numberItems = count;
        $("#filter-count").text("You searched for" + filter);
    });
});

我可以使用PHP，到目前为止我开始使用这样的东西：

<?php
    $search = $_POST['filter'];

    if (isset($search)) {
        echo "var search is $search";
    } else {
        echo "Nothing";
    }
?>

我被困住了。如何显示结果？如何将搜索字符串从主页和联系人页面传递到列表页面？任何帮助赞赏！谢谢！

Answer 1

感谢那些试图提供帮助的人。我想出了如何让它发挥作用。我的代码：

<?php 
    if(isset($_POST["filter"])) {
        $search = $_POST["filter"];
    } else {
        $search = "";
    }
?>

    <ul>
        <li>List item red</li>
        <li>List item yellow</li>
        <li>List item blue</li>
        <li>List item green</li>
        <li>List item gray</li>
        <li>List item pink</li>
        <li>List item aqua</li>
        <li>List item brown</li>
        <li>List item orange</li>
        <li>List item purple</li>
    </ul>

<script>

var test = "<?php echo $search ?>";
if (test.trim()) {
     var filter = test;
     $("li").each(function(){
         if ($(this).text().search(new RegExp(filter, "i")) < 0) {
             $(this).hide("slow");
         } else {
             $(this).show("slow");
         }
     });
     var numberItems = count;
     $("#filter-count").text("Atrasti " + count + " meklējumi " + "\"" + filter + "\"");
}

 $("#filter").keyup(function(){ 
     var filter = $(this).val();
     $("li).each(function(){
         if ($(this).text().search(new RegExp(filter, "i")) < 0) {
             $(this).hide("slow");
         } else {
             $(this).show("slow");
         }
     });
 });

</script>

用于网站的jQuery + PHP搜索栏

1 个答案: