Script added for autocomplete:

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

Method in the controller which send data in list:

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

The code is not working for autocomplete search added script as well.

CodePudding user response：

I'm afraid the issue is missing "#"

and this is my test code

<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>

And this is my controller, I didn't complete the filter:

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

CodePudding user response：

Image for autocomplete display

Its showing when I search any data

CodePudding user response：

Data showing in Script when debug but it wont when search in list in browser when searching image is added.

Data display image