Editable dropdown box in ASP.NET Core 6 MVC

Question

I have ASP.NET Core 6 project. I need an editable dropdown box in one of the views. I tried datalist & javascript autocomplete functionality but both of them not working.

My code in view is :

<input type="text" name="medCompany" id="medCompany" list="ddlmedCompany" class="form-control form-control-lg" />
<datalist id="ddlmedCompany" class="form-control form-control-lg" >
@foreach (var item in Model.lstmedCompany)
{
    <option>@item.Text</option>
}
</datalist>

But this gives look as below:

and dropdwon box is :

What I need is only dropdown box and not test box which is displayed below dropdown box. How can I achieve this?

Answer 1

<style>
/* استایل کمبوباکس سفارشی */
.custom-combobox {
    position: relative;
    width: 100%;
}

.custom-combobox input {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
}

.custom-combobox input:focus {
    border-color: #007bff;
    outline: none;
}

/* لیست کشویی (شبیه select) */
.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    background: white;
    z-index: 1000;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 4px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.custom-options div {
    padding: 8px;
    font-size: 16px;
    cursor: pointer;
}

.custom-options div:hover {
    background: #007bff;
    color: white;
}

<div class="custom-combobox">
<input type="text" name="medCompany" id="medCompany" class="form-control form-control-lg" placeholder="انتخاب یا تایپ کنید" autocomplete="off" />
<div class="custom-options" id="customOptions">
    @foreach (var job in ViewBag.JobsTitle.Distinct())
    {
        <div class="option-item">@job.Text.Trim()</div>
    }
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    let inputField = document.getElementById("medCompany");
    let optionsContainer = document.getElementById("customOptions");
    let options = document.querySelectorAll(".option-item");

    // نمایش لیست هنگام کلیک روی input
    inputField.addEventListener("focus", function () {
        optionsContainer.style.display = "block";
    });

    // بستن لیست هنگام کلیک خارج از کمبوباکس
    document.addEventListener("click", function (e) {
        if (!inputField.contains(e.target) && !optionsContainer.contains(e.target)) {
            optionsContainer.style.display = "none";
        }
    });

    // هنگام تایپ فیلتر شود
    inputField.addEventListener("input", function () {
        let filter = inputField.value.toLowerCase();
        options.forEach(option => {
            if (option.textContent.toLowerCase().includes(filter)) {
                option.style.display = "block";
            } else {
                option.style.display = "none";
            }
        });
    });

    // هنگام کلیک روی گزینه‌ای، مقدار در input قرار بگیرد
    options.forEach(option => {
        option.addEventListener("click", function () {
            inputField.value = this.textContent;
            optionsContainer.style.display = "none";
        });
    });
});

Answer 2

Try to remove class="form-control form-control-lg" from datalist

  <input type="text" name="medCompany" id="medCompany" list="ddlmedCompany"  class="form-control form-control-lg" />
 <datalist id="ddlmedCompany"  >
        @foreach (var item in Model.lstmedCompany)
         {
           <option>@item.Text</option>
          }
   </datalist>