使用codeigniter的jquery自动完成

Question

我正在使用带有 codeigniter 框架的 jQuery 自动完成功能。

这目前 100% 有效。

我的模型是：

  function get_sku_code($q){
    $this->db->select('ProductCode');
    $this->db->like('ProductCode', $q);
    $query = $this->db->get('ProductList');
    if($query->num_rows > 0){
      foreach ($query->result_array() as $row){
        $row_set[] = htmlentities(stripslashes($row['ProductCode'])); //build an array
      }
      $this->output->set_content_type('application/json')->set_output(json_encode($row_set));

    }
  }

我的视图 javascript 是：

 $("#product").autocomplete( 
 { 
 source: "get_sku_codes", 
 messages: 
 { 
 noResults: '', 
 results: function() {} 
 }, 
 select: function( event, ui ) 
 { 
  var selectedObj = ui.item; 
 $.post('get_sku_prices', {data:selectedObj.value},function(result) { 
 $("#product").parent().parent().find('input[id^="price"]').val(result[0]);
 $("#product").parent().parent().find('input[id^="adjustedprice"]').val(result[0]);
 }); 
 } 
 });

如上所述，这 100% 有效。我遇到的一个问题是，如果没有数据库匹配，自动完成列表只是空白。当模型没有返回值时，有没有办法返回“数据库中没有匹配项”？我应该使用 jquery 还是使用 codeigniter mysql 请求来执行此操作？

一如既往的感谢，

控制器 - get_sku_codes

 function get_sku_codes(){
    $this->load->model('Sales_model');
    if (isset($_GET['term'])){
      $q = strtolower($_GET['term']);
      $this->Sales_model->get_sku_code($q);
    }
  }

Answer 1

首先，根据MVC 模式，您不应在模型中回显任何内容。所有这些逻辑都必须在 View 从中获取数据的 Controller 中。

将您的模型更改为：

  function get_sku_code($q){
    $this->db->select('ProductCode');
    $this->db->like('ProductCode', $q);
    $query = $this->db->get('ProductList');
    $row_set = array();
    if($query->num_rows > 0){
      foreach ($query->result_array() as $row){
        $row_set[] = htmlentities(stripslashes($row['ProductCode'])); //build an array
      }
     return $row_set;
  }

还有你的控制器：

  function get_sku_codes(){
    $this->load->model('Sales_model');
    if (isset($_GET['term'])){
      $q = strtolower($_GET['term']);
      $output = $this->Sales_model->get_sku_code($q);
      $this->output->set_content_type('application/json')->set_output(json_encode($output));
    }
  }

然后在您的视图中，您可以在<input id="product"> 下方或旁边的某个位置创建一个<span id="noMatches"></span> 元素，以在返回结果为空时显示“无匹配”消息。

    $("#product").autocomplete(
 { 
    source: "get_sku_codes", 
    response: function(event, ui) {
        if (ui.content.length === 0) {
            $("#noMatches").html("No matches");
        } else {
            $("#noMatches").empty();
        }
    },
    select: function( event, ui ) 
    { 
        var selectedObj = ui.item; 
         $.post('get_sku_prices', {data:selectedObj.value},function(result) { 
             $("#product").parent().parent().find('input[id^="price"]').val(result[0]);
             $("#product").parent().parent().find('input[id^="adjustedprice"]').val(result[0]);
         }); 
    } 
 });