如何在帶有ADO.NET的ASP.NETCoreMVC中使用jQueryAjax自動完成

為自動完成添加的腳本：

$("txtSearch").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: '/ProductSearchDisplay/GetProductDetailsById/',
                            data: "{'prefix': '"   request.term   "'}",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                                debugger
                                response($.map(data, function (item) {
                                    return item;
                                }))
                            },
                            error: function (response) {
                                alert(response.responseText);
                            },
                            failure: function (response) {
                                alert(response.responseText);
                            }
                        });
                    },
                    select: function (e, i) {
                        $("#txtSearch").val(i.item.val);
                    },
                    minLength: 1
                });
            })

在串列中發送資料的控制器中的方法：

public JsonResult GetProductDetailsById(String prefix)
{
    List<ProductMaster> ObjProduct = new List<ProductMaster>();
    ObjProduct = objProductData.SearchProductData(prefix).ToList();
    ViewBag.data = ObjProduct;            
    return Json(ObjProduct);
}

該代碼也不適用于自動完成搜索添加的腳本。

uj5u.com熱心網友回復：

恐怕問題缺少“#”

這是我的測驗代碼

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<input id="txtSearch" />
<script>
    $("#txtSearch").autocomplete({
    //source: ["c  ", "java", "php", "coldfusion", "javascript"],
    source: function (request, response) {
        var param = { "prefix": request.term};
        $.ajax({
            url: '/test/getData/',
            //data: "{'prefix': '"   request.term   "'}",
            data: JSON.stringify(param),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                response($.map(data, function (item) {
                    return item;
                }))
            },
            error: function (response) {
                alert(response.responseText);
            },
            failure: function (response) {
                alert(response.responseText);
            }
        });
    },
    select: function (e, i) {
        $("#txtSearch").val(i.item.val);
    },
    minLength: 1
});
</script>

這是我的控制器，我沒有完成過濾器：

[HttpPost]
public JsonResult getData([FromBody] TestModel model)
{
    List<string> res = new List<string>
    {
        "c  ", "java", "php", "coldfusion", "javascript"
    };
    return Json(res);
}

uj5u.com熱心網友回復：

用于自動完成顯示的影像

它在我搜索任何資料時顯示

uj5u.com熱心網友回復：

除錯時在腳本中顯示的資料，但在添加搜索影像時在瀏覽器中的串列中搜索時不會顯示資料。

資料顯示影像

標籤：查询 阿贾克斯 asp.net-core-mvc

上一篇：在ASP.NETMVC中從不同模型呼叫視圖

下一篇：Laravel8&Ajax-將資料插入表總是重繪加載