ایجاد TextBox با قابلیت Autocomplete توسط جی کویری

می تونید از قابلیت autocomplete خود جی کوئری برای این کار استفاده کنید. برای استفاده از قابلیت autocomplete در جی کوئری می تونید از این لینک استفاده کنید.

ایجاد تکست باکس با قابلیت AutoComplete توسط جی کوئری :

ابتدا یک تگ input مطابق کد زیر رو داخل Page خودتون قرار بدید

<input type="text" id="searchinput" name="searchinput" />

حالا باید در قسمت رفرنس های جاوا اسکریپت اسکریپت زیر رو لینک کنید :

 <script src="//code.jquery.com/jquery-1.12.4.js"></script>
 <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

در رفرنس های بالا اولی همون اسکریپت کتابخانه جی کوئری هست که اگر از قبل دارید می تونید این رفرنس رو لینک نکنید و دومی هم اسکریپت jquery-ui هست که برای استفاده از قابلیت AutoComplete در جی کوئری مورد نیاز هست.

بعد از این باید استایل مربوط به قابلیت AutoComplete در جی کوئری رو به پروژه خودتون لینک کنید

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

خب تا اینجای کار اسکریپت های مورد نیاز به پروژه اضافه شد. حالا در قسمت جی کوئری کد زیر رو بنویسید 

    <script>
        $(document).ready(function () {
            $('#searchinput').autocomplete({
                source: '/Controller/ActionName'
            });
        })
    </script>

به این ترتیب شما کدهای لازم در بخش View رو برای نمایش اطلاعات به صورت AutoComplete نوشتید. اما در بخش source یک آدرس رو مشخص کردیم که اطلاعات باید از طریق این بخش واکشی بشن و در تکست باکس نمایش داده بشن. پس در سمت کنترلر هم دستور زیر رو مینویسیم : 

        [HttpGet]
        public async Task<IActionResult> ActionName()
        {
            
                string term = HttpContext.Request.Query["term"].ToString();
                var query = _context.Table_Name.Get(c => c.Family.Contains(term)).Select(c => c.Family).ToList();
                return Ok(query);
            
        }

از طریق دستور بالا اطلاعات از سمت سرور واکشی شده و به سمت کلاینت به صورت Ajax ارسال میشه. دقت کنید که متغیر term به صورت اتوماتیک از Request ارسال شده مقدار درون تگ input رو به خودش میگیره

موفق باشید

با سلام  در این لینک https://select2.org/  شما میتونید از قابلیتهای AutoComplete  و جستجو کردن استفاده کنید  و در وب سایت  نحوه کار باهاش رو توضیح داده . البته کار باهاش فوق العاده ساده هست  .