изменение результатов поиска при установленном флажке

Question

Привет У меня есть страница поиска, которая позволяет пользователям искать в таблице благотворительных организаций.К каждой благотворительной организации прикреплен один или несколько тегов.В качестве альтернативы поиска я хотел бы получить список тегов (их всего около 20) с флажком для каждого, где, если кто-то отметит один или несколько полей, в списке появятся только благотворительные организации с этими тегами.

Итак, я составил список, и мне посоветовали использовать вызов «наблюдатель» на странице, которая запускается всякий раз, когда меняется форма »

Я набрал в Google форму наблюдателя, но не смог понятьчто именно делать, так как я совершенно новичок в JavaScript.Я использую CakePHP, который использует прототип, кстати,

Может кто-нибудь дать мне немного дорожной карты о том, как это сделать?Я не понимаю, как прикрепить JavaScript к форме и как заставить его вызвать функцию для выполнения запроса

Answer 1

Если вы хотите «живое» обновление списка благотворительных организаций, когда пользователь нажимает на флажки, вы можете использовать ajax для этого. В jQuery встроена отличная библиотека ajax (хотя многие люди по разным причинам против jQuery, это, вероятно, будет вашим самым простым выбором).

Ваши флажки:

<input type='checkbox' value='tag1'> Tag1
<input type='checkbox' value='tag2'> Tag2
<input type='checkbox' value='tag3'> Tag3

JQuery

$(document).ready(function(){

   $('input').click(function(){
       var SearchString = "";
       $('input').each(function(){
          if( $(this).is(':checked') )
              SearchString = SearchString + " AND tagField = " + $(this).val();
       });
       $.ajax({url: 'urlToYourPHPscript.php',
               data: {SearchVal: SearchString},
               success: function(data){
                            //update your html with returned query results in 'data'
                         };
       });
   });

PHP

   //receive the SearchVal Post value send from ajax
   //escape your string to prevent sql injection 
   $lcSearchVal = mysql_real_escape_string( $_POST['SearchVal'] );
   //query your charities table where you have an active charity and
   //searchVal is found in your tags field
   $qry = mysql_query("SELECT * FROM CharitiesTable WHERE Active " . $lcSearchVal)
                        or die("query failed : " . mysql_error() );

   //create an empty array to dump your query results into
   $returnArray = array();
   while( $row = mysql_fetch_array( $qry ) ){
        //dump query results to a usable array to transfer back to jquery
        $returnArray[] = $row;
   }

   return array( "results" => $returnArray );

Теперь, вернувшись в свою функцию успеха jquery ajax, вы можете ссылаться на данные вашего запроса через data.results, и если вы хотите перебрать каждую возвращенную запись, просто поместите это в свою функцию успеха:

if( data.results.length > 0 ){
 for(var i=0; i<data.results.length;i++){
    $('some html div to show results').append(
         oData.results[i]['field1'] + oData.results[i]['field2'] + //etc...
    );
  }
 }