Post
Ask Question
ramesh rammi

ramesh rammi

  • NA
  • 86
  • 14k

How to add new option if not exist in the list using select2

Dec 25 2019 7:36 AM
Actually i had implement the multiple values jquery autocomplete textbox.if the option or item not found in the list i want to add that option to autocomplete box
 
Autocomplete.cshtml:
  1. @{  
  2. Layout = null;  
  3. }  
  4. <!DOCTYPE html>  
  5. <html>  
  6. <head>  
  7. <meta name="viewport" content="width=device-width" />  
  8. <title>Select2 with Ajax</title>  
  9. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />  
  10. <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />  
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>  
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>  
  13. </head>  
  14. <body>  
  15. <div class="container">  
  16. <div class="form-group">  
  17. <label for="Select Country">Select Country</label>  
  18. <select multiple="multiple" class="chose-country form-control"></select>  
  19. </div>  
  20. </div>  
  21. <script>  
  22. $(document).ready(function () {  
  23. $(".chose-country").select2({  
  24. ajax: {  
  25. url: '/Home/GetEmployeeList',  
  26. width: 'resolve',  
  27. data: function (params) {  
  28. return {  
  29. q: params.term// search term  
  30. };  
  31. },  
  32. processResults: function (data) {  
  33. return {  
  34. results: data.items  
  35. };  
  36. },  
  37. minimumInputLength: 2,  
  38. width: 'resolve'  
  39. }  
  40. });  
  41. });  
  42. </script>  
  43. </body>  
  44. </html>  
Select2Model:
  1. public class Select2Model  
  2. {  
  3. public string id { get; set; }  
  4. public string text { get; set; }  
  5. }
HomeController:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using WebApplication3.Models;  
  7. namespace WebApplication3.Controllers  
  8. {  
  9. public class HomeController : Controller  
  10. {  
  11. public ActionResult Index()  
  12. {  
  13. return View();  
  14. }  
  15. public ActionResult About()  
  16. {  
  17. ViewBag.Message = "Your application description page.";  
  18. return View();  
  19. }  
  20. public ActionResult Contact()  
  21. {  
  22. ViewBag.Message = "Your contact page.";  
  23. return View();  
  24. }  
  25. public ActionResult autocomplete()  
  26. {  
  27. return View();  
  28. }  
  29. public ActionResult GetEmployeeList(string q)  
  30. {  
  31. var list = new List<Select2Model>();  
  32. list.Add(new Select2Model()  
  33. {  
  34. text = "India",  
  35. id = "101"  
  36. });  
  37. list.Add(new Select2Model()  
  38. {  
  39. text = "Srilanka",  
  40. id = "102"  
  41. });  
  42. list.Add(new Select2Model()  
  43. {  
  44. text = "Singapore",  
  45. id = "103"  
  46. });  
  47. if (!(string.IsNullOrEmpty(q) || string.IsNullOrWhiteSpace(q)))  
  48. {  
  49. list = list.Where(x => x.text.ToLower().StartsWith(q.ToLower())).ToList();  
  50. }  
  51. return Json(new { items = list }, JsonRequestBehavior.AllowGet);  
  52. }  
  53. }  
  54. }  
Actually i had implement the multiple values jquery autocomplete textbox.if the option or item not found in the list i want to add that option to autocomplete box
 
Please help me.
thanks && Regards

Answers (1)