Autocomplete textbox in ASP.NET MVC

Question

1.00/5 (1 vote)

See more:

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 20-Apr-17 1:09am

Muhammd Aamir

Updated 20-Apr-17 4:13am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Ehsan Sajjad · Answer 1 · 2017-04-20T01:19:00

Solution 1

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.

Posted 20-Apr-17 1:19am

Ehsan Sajjad

Updated 20-Apr-17 1:50am

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

Muhammd Aamir 20-Apr-17 7:30am

ok let me check

Muhammd Aamir 20-Apr-17 7:32am

Mr Ehsan Sajjad the JsonResult Search Action did not fire and nothing happened on my browser

Ehsan Sajjad 20-Apr-17 7:34am

is the autocomplete in

$(document).ready()

?

Muhammd Aamir 20-Apr-17 7:36am

Maybe i am not sure with this ... i have put my whole code in front of you

Ehsan Sajjad 20-Apr-17 7:45am

have you inspected the dev tools console for js errors?

Muhammd Aamir 20-Apr-17 7:47am

No sir

Bryian Tan · Answer 2 · 2017-04-20T04:13:00

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();
    }
}