Jquery UI - 自動完成自定義錯誤

Question

需要在隱藏字段中獲取所選值的ID，但始終返回undefined。控制器的動作和腳本如下。

我在做什麼錯在這裏。我完全是這個UI自動完成的新手。

所以需要幫助來解決這個問題。

('#PanelSearchKeyword').autocomplete({ 
    source: function(request, response) { 
     var params = {}; 
     params.supplieTyperName = document.getElementById('PanelSearchKeyword').value; 
     $.ajax({ 
      type: 'POST', 
      dataType: "json", 
      url: '/Home/GetSupplierTypeNameList', 
      data: AddAntiForgeryToken(params), 
      success: function(data) { 
       var array = data.map(function(element) { 
        return { 
         value: element['SupplierTypeName'], 
         id: element['SupplierTypeId'] 
        }; 
       }); 
       response(array); 
      }, 
      error: function(xhr, ajaxOptions, thrownError) { 
       logError(ajaxOptions, thrownError); 
      } 
     }); 
    }, 
    select: function(event, ui) { 
     $("#SuppTypeId").val(ui.item.SupplierTypeId); // save selected id to hidden input 

     var a = $("#SuppTypeId").val(); 
     alert(a); 
     //return false; 
    }, 
    minLength: 2 
}); 

我的控制器動作看起來像

[HttpPost] 
    [ValidateAntiForgeryToken] 
    public JsonResult GetSupplierTypeNameList(string supplieTyperName) 
    { 
     try 
     { 
      List<SupplierTypeViewModel> supplierTypeNameList = new List<SupplierTypeViewModel>(); 
      supplierTypeNameList = (from supplierType in db.PPSupplierTypes 
            where supplierType.PPSupplierTypeName.ToUpper().StartsWith(supplierTypeName.ToUpper()) 
            orderby supplierType.PPSupplierTypeName 
            select new SupplierTypeViewModel 
            { 
             SupplierTypeId = supplierType.PPSupplierTypeId, 
             SupplierTypeName = supplierType.PPSupplierTypeName 
            }).ToList(); 
      return supplierTypeNameList; 
     } 
     catch (Exception) 
     { 
      throw; 
     } 
     return Json(suppplierTypeResult, JsonRequestBehavior.AllowGet); 
    } 

Answer 1

對於到目前爲止，我也做了同樣........ 鑑於文件

   <script> 
     var name; 
     var id; 
     $(function() { 
      $("#tags").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         type: "POST", 
         url: "<?php echo base_url() . 'dashboard/search'; ?>", 
         dataType: "json", 
         data: {'userA': request.term}, 
         success: function (msgs) 
         { 
          var array = msgs.map(function (element) { 
           return {value: element['name'], id: element['id']}; 
          }); 
          response(array); 
         } 
        }); 
       }, 
       select: function (event, ui) { 
        name = ui.item.value; 
        id = ui.item.id; 
        $("#hotel_id").val(id); 
        $("#hotel_name").val(name); 
       } 

      }); 

     }); 
    </script> 

      <div class="ui-widget"> 
     <label for="tags" style="color:#eee;">Search by hotel name, address or contact.</label> 
     <input placeholder="Select a Hotel..." id="tags" class="form-control"> 
     <input type="hidden" id="hotel_id" /> 
     <input type="hidden" id="hotel_name" /> 
    </div> 

在控制器

  public function search() { 
    if (isset($_POST['userA'])) { 
     $userPart = $_POST['userA']; 
    } else { 
     $userPart = ""; 
    } 

    $result = $this->dbmodel->search($userPart); 
    $list = array(); 

    foreach ($result as $finaldata) { 
     $dataN = $finaldata->name; 
     $dataK = $finaldata->id; 
     array_push($list, $dataN); 
    } 

    if ($userPart != "" && $userPart != NULL) { 
     echo json_encode($result); 
    } 
} 

and in db模型

 function search($value) { 
    $this->db->select('id, name'); 
    $this->db->where("status", "1"); 
    $this->db->where("verification_status", "1"); 
    $this->db->where("suspension_status", "0"); 
    $where = "(name LIKE '%$value%' 
     OR address LIKE '%$value%' OR contact LIKE '%$value%')"; 
    $this->db->where($where); 
    $result = $this->db->get('hotel_info'); 

    return $result->result(); 
} 

希望它會幫助你