jQuery自動完成和JSON響應 - 手動提交時與自動提交時的不同響應

Question

我在這個jQuery UI自動完成設置中看到了奇怪的行爲。

當我開始鍵入「Smith」時，自動完成在下拉列表中提供了幾個選項（例如，「Joe Smith」，「Mary Taylor」，「Jack Sparrow」）。在控制檯上我沒有看到錯誤和響應

[{"value":"Joe Smith"},{"value":"Mary Taylor"},{"value":"Jack Sparrow"}]

但如果我點擊提交/搜索按鈕，然後我得到一個空白頁：

[{"value":"Joe Smith"}]

不知怎麼的，我的模型查詢在通過jQuery自動完成運行時返回所有用戶 - 但是當我手動觸發它時，它會返回正確的結果。

任何想法這裏有什麼問題嗎？

謝謝。

JS：

$(function() { 
     function log(message) { 
      $("<div/>").text(message).prependTo("#log"); 
      $("#log").attr("scrollTop", 0); 
     } 

     $("#search_input").autocomplete({ 
      source: "http://example.com/search", 
      minLength: 2, 
      select: function(event, ui) { 
       log(ui.item ? 
        "Selected: " + ui.item.value + " aka " + ui.item.id : 
        "Nothing selected, input was " + this.value); 
      } 
     }); 
    }); 

控制器（search.php中，笨標記）：

function index() 
{ 
    $term = $this->input->post('search_input'); 

    $response = json_encode($this->search_model->search($term)); 

    echo $response; 
} 

模型（search_model.php，笨標記）：

function search($term) 
{ 
    $query = $this->db->query(" 
    SELECT up.first_name, up.last_name 
     FROM user_profiles up, users u, pets p 
     WHERE u.activated = 1 
      AND u.banned = 0 
      AND up.last_name LIKE '%" . $term . "%' 
      GROUP BY up.last_name 
     ORDER BY up.last_name ASC; 
     "); 

    $search_data = array(); 

    foreach ($query->result() as $row) { 

     $search_data[] = array(

      'value' => $row->first_name . ' ' . $row->last_name, 
     ); 
    } 
    return $search_data; 
} 

Answer 1

它看起來像您沒有發送搜索字詞。我已經簡化爲一個PHP函數。 $ term將由自動完成腳本發送。

$term = $_GET['term'] 

    function search($term) 
    { 
     $query = $this->db->query(" 
     SELECT up.first_name, up.last_name 
      FROM user_profiles up, users u, pets p 
      WHERE u.activated = 1 
       AND u.banned = 0 
       AND up.last_name LIKE '%" . $term . "%' 
       GROUP BY up.last_name 
      ORDER BY up.last_name ASC; 
      "); 

     $search_data = array(); 

     foreach ($query->result() as $row) { 

      $search_data[] = array(

       'value' => $row->first_name . ' ' . $row->last_name, 
      ); 
     } 
     echo json_encode($search_data); 
    } 

Answer 2

我想一個更好的解決方案是使用jQuery .ajax()和功能設置爲POST數據。這樣我可以避免使用GET，並且不必創建額外的控制器來處理POST和GET。

$("#search_input").autocomplete({ 
    source: function(request, response) { 
      $.ajax({ 
       url: "search", 
       dataType: "json", 
       type: "POST", 
       data: { 
        search_input: request.term 
       }, 
       success: function(data) { 
        //map the data into a response that will be understood by the autocomplete widget 
        response($.map(data, function(item) { 
         return { 
          label: item.value, 
          value: item.value 
         } 
        })); 
       } 
      }); 
    }, 
    minLength: 2, 
    //when you have selected something 
    select: function(event, ui) { 
     //close the drop down 
     this.close 
    }, 
    //show the drop down 
    open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    //close the drop down 
    close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    } 
});