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