自动完成 ajax 网络核心 2.0

Question

网页上的自动完成功能不起作用。输入中没有显示的建议。我不熟悉ajax。提前感谢您的帮助。

Json 响应看起来不错：

https://localhost:44333/Cars/SearchProduct?term=for

            0   
            id  1
            label   "ford"
        name    "ProductNameID"

动作看起来不错

        public ActionResult SearchProduct(string term)//I think that the id that you are passing here needs to be the search term. You may not have to change anything here, but you do in the $.ajax() call
                {

                    var routeList = _context.Product.Where(r => r.ProductName.Contains(term))//this is a text filter no?
                                      .Select(r => new { id = r.ProductID, label = r.ProductName, name = "ProductNameID" }).ToArray();
                    return Json(routeList);
                }

还有我在网页上使用的代码

     <div class="ui-widget">
            <label>Product test: </label>
            <input id="ProductNameID" name="ProductNameID" type="text" />
        </div>

        <script>
            $(document).ready(function () {
                $("#ProductNameID").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: '/Cars/SearchProduct',
                            type: 'GET',
                            cache: false,
                            data: request,
                            dataType: 'json',
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        label: item,
                                        value: item + ""
                                    }
                                }))
                            }
                        });
                    },
                    minLength: 2,
                    select: function (event, ui) {
                        alert('you have selected ' + ui.item.label + ' ID: ' + ui.item.value);
                        $('#ProductNameID').val(ui.item.label);
                        return false;
                    }
                });
            });
        </script>

Answer 1

您的操作似乎正在返回 ID、标签和名称。我认为您也需要返回值。 IE。

.Select(r => new { id = r.ProductID, label = r.ProductName, name = 
"ProductNameID",value="Value Column or whatever your calling this" }).ToArray();