jQuery + PHP网站搜索栏 [英] jQuery + PHP search bar for website

问题描述

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

I am trying to make a search bar for a very simple website. I have three pages : home, list and contacts. Header are the same for every page. It contains a search bar. I have a very good piece of code that is working perfectly in the same page where are searchable list, but I can't figure out how to make it work from other two pages. So far I have:

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，到目前为止，我是从这样的东西开始的:

I can use PHP, so far I started with something like this:

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

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

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

I am stuck. How to display the results? How to pass search string from home and contacts page to list page? Any help appreciated! Thanks!

推荐答案

感谢那些试图提供帮助的人.我想出了使它工作的方法. 我的代码:

Thanks to those who tried to help. I figured out how to make it work. My code:

<?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网站搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！