Question

您好我有一个搜索页面，允许用户搜索慈善机构的表格。每个慈善机构都附有一个或多个标签。作为一种搜索替代方案，我想要一个标签列表（只有20个左右），每个标签都有一个复选框，如果有人检查了一个或多个方框，那么只有具有这些标签的慈善机构出现在列表中。

所以我已经制作了这个列表，并被告知我应该在窗体更改后的页面上使用'observerform'调用'

我用谷歌搜索了观察者形态，但由于我对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...
    );
  }
 }

选中复选框时更改搜索结果

1 个答案: