Click here to Skip to main content
16,019,843 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hi everyone hope all of you are good...
i am new to MVC and i am facing a problem i want to autocomplete the textbox with my hardcoded data using jquery but do not get any success in this matter, i have added the reference of jquery autocomplete API but nothing happened kindly help me to overcome this issue .. thankx in advance

What I have tried:

Model:
public class Locations
    {

        public int Id { get; set; }
        public string Name { get; set; }

        public List<Locations> locations = new List<Locations>()
        {
            new Locations() {Id = 1, Name = "London"},
            new Locations() {Id = 2, Name = "Walles"},
            new Locations() {Id = 3, Name = "Birmingham"},
            new Locations() {Id = 4, Name = "Edinburgh"},
            new Locations() {Id = 5, Name = "Glasgow"},
            new Locations() {Id = 6, Name = "Liverpool"},
            new Locations() {Id = 7, Name = "Bristol"},
            new Locations() {Id = 8, Name = "Manchester"},
            new Locations() {Id = 9, Name = "NewCastle"},
            new Locations() {Id = 10, Name = "Leeds"},
            new Locations() {Id = 11, Name = "Sheffield"},
            new Locations() {Id = 12, Name = "Nottingham"},
            new Locations() {Id = 13, Name = "Cardif"},
            new Locations() {Id = 14, Name = "Cambridge"},
            new Locations() {Id = 15, Name = "Bradford"},
            new Locations() {Id = 16, Name = "Kingston Upon Hall"},
            new Locations() {Id = 17, Name = "Norwich"},
            new Locations() {Id = 18, Name = "Conventory"}
        };
    }


Controller:

public class DefaultController : Controller
   {
       public ActionResult Index()
       {
           return View();
       }

       public JsonResult Search(string term)
       {
           Locations l = new Locations();
           List<string> Loc;
           Loc = l.locations.Where(x => x.Name.StartsWith(term)).Select(x => x.Name).Distinct().ToList();
           return Json(Loc, JsonRequestBehavior.AllowGet);
       }
   }


View:

@model IEnumerable<SearchBox.Models.Locations>
@using SearchBox.Models
@{
    ViewBag.Title = "Index";
}
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script src="~/Content/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function () {
        $('#searchText').autocomplete({
            source: '@Url.Action("Search")' 
            });
    })
</script>



<h2>Search Demo</h2>
@using (Html.BeginForm())
{
   <input type = "text" id="searchText" name="searchText" />
   <input type="submit" value="Search" />
}
Posted
Updated 20-Apr-17 4:13am

You would need to specify the properties for display element and id for it :

JavaScript
$("#searchText").autocomplete({  
           source: function(request,response) {  
               $.ajax({  
                   url: '@Url.Action("Search","Default")',  
                   type: "GET",  
                   dataType: "json",  
                   data: { term : request.term },  
                   success: function (data) {  
                       response($.map(data, function (item) {  
                           return { label: item.Name, value: item.Name };  
                       }))  
  
                   }  
               })  
           },  
           messages: {  
               noResults: "", results: ""  
           }  
       });


As you are returning property with name Name you need to specify that as it is fone above for label and value property of it.
 
Share this answer
 
v2
Comments
Muhammd Aamir 20-Apr-17 7:27am    
thankx Ehsan Sajjad for sharing knowledge .. but it does't work for me
Ehsan Sajjad 20-Apr-17 7:28am    
please put a break point in action method and see if it is getting called
Afzaal Ahmad Zeeshan 20-Apr-17 7:35am    
Ehsan, reply to their comment by clicking the Reply button with their comment, that will notify them. Otherwise, they cannot be notified and would require to recheck the page.
Ehsan Sajjad 20-Apr-17 7:36am    
thanks Afzaal for letting me know :) i am not familiar much with codeproject forums :)
Ehsan Sajjad 20-Apr-17 7:29am    
and also check browser console for any javascript errors
Everything look fine beside the model, it look a little odd. I think that code will throw circular reference error. Try move the model population code outside the locations class. Here is an example.

Model
C#
public class Locations
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

Controller
C#
public class DefaultController : Controller
{
    public JsonResult Search(string term)
    {
        List<Locations> l = new List<Locations>()
        {
            new Locations() {Id = 1, Name = "London"},
            new Locations() {Id = 2, Name = "Walles"},
            new Locations() {Id = 3, Name = "Birmingham"},
            new Locations() {Id = 4, Name = "Edinburgh"},
            new Locations() {Id = 5, Name = "Glasgow"},
            new Locations() {Id = 6, Name = "Liverpool"},
            new Locations() {Id = 7, Name = "Bristol"},
            new Locations() {Id = 8, Name = "Manchester"},
            new Locations() {Id = 9, Name = "NewCastle"},
            new Locations() {Id = 10, Name = "Leeds"},
            new Locations() {Id = 11, Name = "Sheffield"},
            new Locations() {Id = 12, Name = "Nottingham"},
            new Locations() {Id = 13, Name = "Cardif"},
            new Locations() {Id = 14, Name = "Cambridge"},
            new Locations() {Id = 15, Name = "Bradford"},
            new Locations() {Id = 16, Name = "Kingston Upon Hall"},
            new Locations() {Id = 17, Name = "Norwich"},
            new Locations() {Id = 18, Name = "Conventory"}
        };

        List<string> Loc;
        Loc = l.Where(x => x.Name.StartsWith(term)).Select(x => x.Name).Distinct().ToList();
        return Json(Loc, JsonRequestBehavior.AllowGet);
    }

    // GET: Default
    public ActionResult Index()
    {
        return View();
    }
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900