2015-07-29 4 views
1

Я пытаюсь создать панель поиска для очень простого сайта. У меня есть три страницы: дом, список и контакты. Заголовки одинаковы для каждой страницы. Он содержит панель поиска. У меня очень хороший код, который отлично работает на той же странице, где есть список для поиска, но я не могу понять, как заставить его работать с двух других страниц. До сих пор у меня есть:jQuery + панель поиска PHP для сайта

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"; 
    } 
?> 

Я застрял. Как отобразить результаты? Как передать строку поиска из дома и страницы контактов на страницу списка? Любая помощь ценится! Спасибо!

+0

Я нашел этот вопрос: http://stackoverflow.com/questions/8469233/enter-in-search-box-and-redirect-to-another-page, но я до сих пор застрял. Может кто-нибудь, пожалуйста, объясните? – Kristine

+0

Я также нашел это: http://blog.grapii.com/2010/08/how-to-build-a-simple-search-filter-with-jquery/, но мне все еще нужна перенаправляющая часть :(Пожалуйста, пожалуйста , пожалуйста, помогите мне! – Kristine

ответ

0

Спасибо тем, кто пытался помочь. Я понял, как заставить его работать. Мой код:

<?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> 
-2

Вы должны создать файл s и включить этот файл на все страницы. Все страницы должны иметь библиотеку jQuery.

+0

И создайте две разные строки поиска: одна для реальной страницы списка и другая для дома и для контактов? Нет ли способа передать искомую строку? – Kristine

+0

Вы можете сохранить поиск в сеансе или сериализовать данные, таким образом, вы можете передавать данные со страницы на другую. –

+0

Я не уверен, как это сделать, мои навыки JavaScript ниже среднего. – Kristine

Смежные вопросы