Populate DropDownList based on TextBox value using jQuery AJAX in ASP.Net MVC

Hi Ruben12345,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public JsonResult GetNames(string text)
    {
        NorthwindEntities db = new NorthwindEntities();
        List<Employee> employees = new List<Employee>();
        if (!string.IsNullOrEmpty(text))
        {
            employees = db.Employees
                        .Where(m => m.FirstName.Contains(text))
                        .OrderBy(m => m.FirstName).ToList();
        }

        List<object> listObj = new List<object>();
        foreach (Employee employee in employees)
        {
            listObj.Add(new
            {
                id = employee.EmployeeID,
                name = employee.FirstName
            });
        }
        return Json(listObj, JsonRequestBehavior.AllowGet);
    }
}

View

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        $('#txtName').on('change', function () {
            loaddepartement();
        });
    });
    function loaddepartement() {
        var url = 'Home/GetNames';
        var name = { text: $('#txtName').val() };
        var selectdepartment = $('#select-name');
        $.getJSON(url, name, function (data) {
            $(selectdepartment).empty();
            $(selectdepartment).append('<option value=0>Please Select</option>');
            for (var i = 0; i < data.length; i++) {
                $(selectdepartment).append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
            }
        });
    };
</script>
<br />
<div class="col-sm-6">
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-id-card"></i></span>
        <input id="txtName" type="text" class="form-control" />
    </div>
</div>
<div class="col-sm-6">
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-id-card"></i></span>
        <select class="form-control" id="select-name">
        </select>
    </div>
</div>

Screenshot