2
Answers

Autocomplete Text box MVC

أماني مفيد

أماني مفيد
4y
654
1
i have auto complete text box
 
this is the script
  1. <head>  
  2. <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>  
  3. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
  4. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  
  5. </head>  
  6. <body>  
  7. <input id='CountryName'/>  
  8. <span id='CountryID'></span>  
  9. var data2;  
  10. $.ajax({  
  11. url: '/Home/GetRecord',  
  12. dataType: "json",  
  13. data: data2,  
  14. success: function (data) {  
  15. data2 = data;  
  16. },  
  17. error: function (xhr, status, error) {  
  18. alert("Error");  
  19. }  
  20. });  
  21. $('#CountryName').autocomplete({  
  22. data: { search: $("#searchInput").val() },  
  23. source: function y(request, response) {  
  24. response($.map(data2, function (item) {  
  25. return {  
  26. label: item.t,  
  27. value: item.t  
  28. }  
  29. }));  
  30. }  
  31. ,  
  32. select: function (e, ui) {  
  33. e.preventDefault();  
  34. $(this).val(ui.item.label);  
  35. $('#CountryID').html(ui.item.value);  
  36. }  
  37. });  
  38. </script>  
this is the controller
  1. [HttpGet]  
  2. public JsonResult GetRecord(string prefix)  
  3. {  
  4. DataSet dst = new DataSet();  
  5. dst.Tables.Add(op.GetName(prefix));  
  6. List<DataSearch> searchlist = new List<DataSearch>();  
  7. foreach (DataRow dr in dst.Tables[0].Rows)  
  8. {  
  9. searchlist.Add(new DataSearch  
  10. {  
  11. t = dr["ARTICAL_NAME"].ToString()  
  12. });  
  13. }  
  14. return Json(searchlist , JsonRequestBehavior.AllowGet);  
  15. }
when i click in text box that ajax call not work , i call it from url like this https://localhost:44330/home/GetRecord?prefix=t
and the result
 
[{"t":"test"},{"t":"test from it "},{"t":"table "}] and appear in new page
 
any help to make result appear as dropdown when i start write inside textbox
Answers (2)
Next Recommended Forum