2016-12-04 6 views
0

私はCodeIgniterで検索機能を作成しようとしています。検索バーCodeigniter - 検索フィールドをクリックするだけでどのように検索ページを読み込むことができますか?

<?php echo form_open('controller/live_search');?> 
    <div class="toolbar-icon-bg hidden-xs" id="toolbar-search"> 
     <div class="input-group"> 
      <span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-search"></i></button></span> 
      <input type="text" name="search" id="search" class="form-control" placeholder="Search..."> 
      <span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-close"></i></button></span> 
     </div> 
    </div> 
    <?php echo form_close();?> 

検索の結果が含まれている本体部分を、含まれてい

ヘッダ部分、: マイビューファイルは二つの部分に分割されました。私は「live_search」パブリック関数単に検索フィールドを選択し、「アクティブ化」したい

public function live_search() 
    { 

     //load page template  
     $this->load->view('templates/header'); 
     $this->load->view('templates/sidebar'); 
     $this->load->view('templates/live_search'); 
     $this->load->view('templates/footer'); 
    } 

<div class="static-content-wrapper"> 
       <div class="static-content"> 
        <div class="page-content"> 
         <ol class="breadcrumb"> 

          <li class=""><a href="<?php echo base_url();?>">Home</a></li> 
          <li class="active">Search</li> 

         </ol> 
         <div class="container-fluid"> 

          <div class="row"> 
           <div class="col-sm-12"> 
            <div class="panel panel-white"> 
             <div class="panel-heading"> 
              <h2><!-- Panel --></h2> 
             </div> 
             <div class="panel-body"> 
              <div style="clear:both;"></div> 
              <div id="update"><!-- search results will be added here --></div> 
             </div> 
             <div class="panel-footer"> 
              <span class="text-gray"><em>Footer</em></span> 
             </div> 
            </div> 
           </div> 
          </div> 

         </div> <!-- .container-fluid --> 
        </div> <!-- #page-content --> 
       </div> 

は私のコントローラでは、私は次のコードを書いています。単に例を挙げると、Netflixの検索機能を考えることができます。検索バーを選択すると、黒いページが自動的に読み込まれ、入力を開始すると検索結果が表示されます。

したがって、検索テキストフィールドを選択すると、スクリプトは「templates/live_search」ページを読み込む必要があります。

どうすればいいですか? あなたの親切なサポートに感謝します。

答えて

0

このようなDOM操作は、サーバー上のCodeIgniter、JSのクライアントサイトで行われません。あなたは検索入力フォーカスを聞くためにJSを必要とし、次にあなたの "ライブ検索ページ"(あなたがそこに欲しいものを明確にはっきりしていない)のAJAXか、最初のページ読み込み時にすべてをロードし、 "検索バーの焦点に。

あなたはjQueryのを使用している場合には、このようなものになります。

$('body').on("focus","#search",function(){ 
    $('.live-search-container').show() 
    //or do an ajax call 
}); 
+0

こんにちは、あなたの親切な返事に感謝を。申し訳ありませんが、私は理解しませんでした。私はjQueryの新機能ですので、少し具体的にお尋ねします。私のフッターにこのコードの部分をどこに適用すればよいですか? – mauro269

+0

彼が言うことは、この種のものはサーバー側では処理されないということです。検索のためにビューを読み込んで隠しておくことができます( 'display:none')。ユーザが検索ボタンにフォーカスすると、 '$( '。live-search-container')。show()'は 'display:none'を削除して表示します。 –

+0

関連する問題