Codeigniter - 我怎樣才能加載一個搜索頁面，只需點擊搜索字段？

Question

我期待在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();?> 

身體部位，包含搜索的結果。

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

在我的控制，我寫了下面的代碼：

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'); 
    } 

我想「激活」「live_search」公共職能簡單地選擇搜索領域。舉個例子，你可以考慮Netflix的搜索功能。當您選擇搜索欄時，會自動加載黑色頁面，並開始鍵入查看搜索結果。

所以，當我選擇搜索文本字段時，我的腳本應該加載「templates/live_search」頁面。

我該怎麼做？ 感謝您的支持。

Answer 1

像這樣的DOM操作不在服務器上的CodeIgniter中完成，它在JS中完成了客戶端站點。您需要JS來監聽搜索輸入焦點，然後在您的「實時搜索頁面」（不完全清楚您想要的內容）或者初始頁面加載時加載所有內容，然後僅顯示「實時搜索頁面「關於搜索欄的重點。

如果你使用jQuery它可能是這個樣子：

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

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.