Autocomplete textbox in ASP.NET Core not working

Question

@model InventoryManagement.Models.ViewModel.AddBom
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
}

<div class="bg-secondary bg-opacity-10 py-2">
    <div class="container">
        <h1>
            Add BOM
        </h1>
    </div>
</div>
<div class="container py-5">
    <form method="post">
        <div class="mb-3">
            <label class="form-label">Item Name</label>
            <input type="text" class="form-control" id="itemname" asp-for="Itemlist" />
        </div>
 </form>
 </div>
 @section Scripts
 {
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js"></script>
    <link rel="Stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            var kk = function (request, response) {
                $.ajax({
                    url: '/Bom/AutoComplete/',
                    data: { "prefix": request.term },
                    type: "POST",
                    success: function (data) {
                        var formattedData = $.map(data, function (item) {
                            return {
                                label: item.label,
                                value: item.val
                            };
                        });
                        response(formattedData);
                        console.log("888", formattedData)
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            };
                 console.log("888hh", kk);
                 $("#itemname").autocomplete({
                source: function (request, response) {
                    kk(request, response);
                    alert("llllllllllllllllllllll");
                },
                select: function (e, i) {
                    //get selected value
                    //$("#personNameValue").val(i.item.val);
                },
          
            });
        });
    </script>
}

This is the Add.cshtml file. Here the success function is working and console.log is outputting value, but the value is not displaying in dropdown.

This is the Bomcontroller.cs and is correctly fetching values:

[HttpPost("AutoComplete")]
public JsonResult AutoComplete(string prefix)
{
    var persons = (from item in this.jobdbcontext.ItemMaster
                   where item.itemname.StartsWith(prefix)
                   select new
                       {
                           label = item.itemname,
                           val = item.itemid
                       }).Take(5).ToList();

    return Json(persons);
}

Do you use F12 to see if any error message ? "but the value is not displaying in dropdown." What's your dropdown ? — Qing Guo
– Qing Guo, Commented Jan 23, 2024 at 7:32
console.log output is showing value in console window {label: 'Item1', val: 'Item1'} label : "Item1" val : "Item1" [[Prototype]] : Object Bom:281 {label: 'Item2', val: 'Item2'} label : "Item2" val : "Item2" [[Prototype]] : Object Bom:281 {label: 'Item3', val: 'Item3'} label : "Item3" val : "Item3" [[Prototype]] : Object — Lakshmi Sureshan
– Lakshmi Sureshan, Commented Jan 23, 2024 at 10:45

Qing Guo · Accepted Answer · 2024-01-23 09:27:06Z

0

You can try the below code:

1.Change the [HttpPost("AutoComplete")] to [HttpPost]

  [HttpPost]
  public JsonResult AutoComplete(string prefix)
  {...//add your code}

2.Modify your script code like below OR just remove alert("llllllllllllllllllllll"); from your code :

<script type="text/javascript">
    $(document).ready(function () {
        $("#itemname").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Bom/AutoComplete',
                    data: { "prefix": request.term },
                    type: "POST",                        
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.label, value: item.val };
                        }))    
                    }    
                })
            }
        });
    })
</script>

result:

edited Jan 23, 2024 at 9:27

answered Jan 23, 2024 at 9:10

Qing Guo

9,3071 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lakshmi Sureshan Over a year ago

with [HttpPost("AutoComplete")] only it is redirecting to controller and is properly fetching values . output in coming on success function of ajax ..but value is not displaying in dropdown

Lakshmi Sureshan Over a year ago

Now it is working fine. Because of breakpoint it is taking time to display

Collectives™ on Stack Overflow

Autocomplete textbox in ASP.NET Core not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related