How to Filter List box Data Using TextBox Component

6 Dec 20242 minutes to read

This example demonstrates how to filter data in the Syncfusion^® ListBox using a TextBox component. It shows the implementation of a TextBox filter for data filtering in ListBox items.

CSHTML

<div id="container" style="margin:10px auto 0; width:250px;">
    <label for="filter">Enter Text: </label>
    <input id="filter" oninput="handleFilterChange(event)" />
    @Html.EJS().ListBox("listbox").DataSource((IEnumerable<object>)ViewBag.data).Render()
</div>


<script>
    function handleFilterChange(event) {
        var listbox = document.getElementById("listbox").ej2_instances[0];
        var input = event.target.value;
        if (listbox) {
            var query = new ej.data.Query().where('text', 'contains', input, true);
            listbox.query = query;
            listbox.dataBind();
        }
    }
</script>

Scroller.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class ListBoxController : Controller
    {
        public IActionResult selectitem()
        {
            ViewBag.data = new string[] { "BadmHennessey Venominton", "Bugatti Chiron", "Bugatti Veyron Super Sport", "SSC Ultimate Aero", "Koenigsegg CCR", "McLaren F1", "Aston Martin One- 77", "Jaguar XJ220" };
            return View();
        }
    }
}