Jquery UI - 自动完成自定义错误

Question

需要在隐藏字段中获取所选值的 ID，但它总是 return 未定义。下面给出控制器动作和脚本。

我在这里做错了什么。我对这个 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);
    }
}

在数据库模型中

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

希望对您有所帮助

Jquery UI - 自动完成自定义错误

Jquery UI - Autocomplete customize error

javascript

asp.net-mvc

jquery

jquery-ui-autocomplete