How to Implement Autocomplete Textbox in MVC

Question

I am facing a problem in autocompleting the textbox vith hardcoded data, my json "Search" method does not fire i have been search a lot of code implement it into my project but did not get any success yet. i dont know where is the problem. kindly help me thankx in advance

Model:

  public class Locations
    {

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

    }

Controller:

public JsonResult Search(string query)
        {
            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"}

            };
            List<string> Loc;
            Loc = locations.Where(x => x.Name.StartsWith(query.ToLower())).Select(x => x.Name).ToList();
            return Json(Loc, JsonRequestBehavior.AllowGet);
        }

View:

@model IEnumerable<SearchBox.Models.Locations>
@using SearchBox.Models
@{
    ViewBag.Title = "Index";
}

<link href="~/Content/Autocomplete/jquery-ui.css" rel="stylesheet" />
<script src="~/Content/Autocomplete/jquery-ui.js"></script>
<link href="~/Content/Autocomplete/jquery-ui.theme.css" rel="stylesheet" />

<script type="text/javascript">
    $("#tags").autocomplete({
        source: '@Url.Action("Search")'
    });
</script>

    <input type="text" id="tags" />

You may need to use AJAX call in source assignment: `source: function (request, response) { $.ajax({ ... }) })` with URL parameter set as `url: '@Url.Action("Search")'` to do so, or adding `query` string parameter in `Url.Action` helper method. — Tetsuya Yamamoto, Apr 21 '17 at 06:29
@TetsuyaYamamoto tried this but i dont know where the problem came out, nothing happened :( — Muhammad Aamir Majeed, Apr 21 '17 at 06:39

Amit Kumar · Answer 1 · 2017-04-21T06:54:51.097

0

You need to make ajax request instead of passing just url in data source.

<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script src="~/Content/jquery-1.12.4.js"></script>
<script src="~/Content/jquery-ui.js"></script>

<input type="text" id="tags" />

<script type="text/javascript">
    $("#tags").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("Search")',
                dataType: "jsonp",
                data: {
                    term: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.Name,
                            value: item.Id
                        };
                    }));
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {

        }
    });
</script>

See how to use autocomplete with ajax request.

edited Apr 21 '17 at 06:54

answered Apr 21 '17 at 06:31

Amit Kumar

5,888
11
47
85

Nothing happened, I have already tried this solution but still the problem is same – Muhammad Aamir Majeed Apr 21 '17 at 06:36
@MuhammadAamir : Did you have included [jquery](https://code.jquery.com/jquery-1.12.4.js) beacuase it working at my end. – Amit Kumar Apr 21 '17 at 06:44
yes @Amit Kumar I have included the the Jquery at the top of my View Page Like this ... is this you are talking about ?? – Muhammad Aamir Majeed Apr 21 '17 at 06:50
– Muhammad Aamir Majeed Apr 21 '17 at 06:50
@MuhammadAamir : you also need to include jquery bundle. `` – Amit Kumar Apr 21 '17 at 06:51
If i am wrong then please do let me how to include Jquery ? – Muhammad Aamir Majeed Apr 21 '17 at 06:52
Download js file from here. [Download Jquery](https://code.jquery.com/jquery-1.12.4.js) . Add in your content folder. and drag that file at top of view page. See the update answer. – Amit Kumar Apr 21 '17 at 06:55
I have downloaded the above mentioned file do the same what you said like this but nothing happened again :( very awkward that the same code is working at your end but does nothing at my end – Muhammad Aamir Majeed Apr 21 '17 at 07:03
Open browser console by pressing `F12` and click on console tab. Then refresh the page. Now try to type anything in textbox. and let me know is there any error in console or not – Amit Kumar Apr 21 '17 at 07:07
Nothing Happened Again – Muhammad Aamir Majeed Apr 21 '17 at 07:09
When i press **f12** i show me red lined like this in console tab Uncaught ReferenceError: jQuery is not defined at jquery-ui.js:14 at jquery-ui.js:16 – Muhammad Aamir Majeed Apr 21 '17 at 07:10
And Uncaught TypeError: $(...).autocomplete is not a function at Index:39 this one also – Muhammad Aamir Majeed Apr 21 '17 at 07:11
Got the issue. follow these steps, it will work . Remove all script reference from your view. Download these 2 js file from here. [jquery](https://code.jquery.com/jquery-1.12.4.js) and [Jquery UI](https://code.jquery.com/ui/1.12.1/jquery-ui.js) and include in sequence as of my answer. – Amit Kumar Apr 21 '17 at 07:14
Now the errors are gone :) which i have mentioned in above reply but the input box does nothing :( – Muhammad Aamir Majeed Apr 21 '17 at 07:25
Dear @AmitKumar Nothing Happened, i have used break point at my controller which returns json result but it does not call by javascript... kindly put some attention at my controller also – Muhammad Aamir Majeed Apr 21 '17 at 07:37
Now when i press **f12** and refresh the page after that it show me something like this .......... browserLink:37 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. – Muhammad Aamir Majeed Apr 21 '17 at 07:43
Kindly Help me to get out of this issue i think you are getting closer to the problem – Muhammad Aamir Majeed Apr 21 '17 at 08:00

score 0 · Answer 2 · answered Apr 21 '17 at 08:05

I have implemented this in my project. Please check if you can make use of it

<div class="tag_cover" style="margin-top:60px; margin-left:57px">
 <input type="text" style="width:300px; display:inline-block; border:transparent" class="tag_input brzero has-icon" id="SkillSet" list="json-datalist" placeholder="Employee name or Skills">
 <datalist id="json-datalist"></datalist>    
</div>

JQuery:

  $(".tag_input").keyup(function (e) {
        var type = $("input[name='search']:checked").val();
        if (type == "Name") {
            var sString = $("#SkillSet").val();
            if (sString == null || sString == "") {
                e.preventDefault();
            }
            else {
                $.ajax({
                    url: "@Url.Action("GetEmployeeNameByKeyword","Home")",
                    type: "POST",
                    data: { 'SearchedString': sString },
                    dataType: "json",
                    success: function (data) {
                        if (data == null || data == "") {
                            //alert("no skills found");
                        }
                        else {
                            var dataList = document.getElementById('json-datalist');
                            $(dataList).empty();
                            $.each(data, function (key, value) {
                                $(dataList).append($('<option>').text(value.UserNames.trim()).attr("value", value.UserId));
                            });
                        }
                    },
                    error: function () {
                        alert("failure");
                    }
                });
            }
        }
    }

Controller:

   public JsonResult GetEmployeeNameByKeyword(string SearchedString)
    {
        List<UserProfile> EmployeeNames = new List<UserProfile>();
        EmployeeNames = _db.UserProfiles.Where(i => i.UserNames.Contains(SearchedString)).ToList();
        return Json(EmployeeNames, JsonRequestBehavior.AllowGet);
    }

there is nothing to show when i start typing in textbox even it does not fire the json method — Muhammad Aamir Majeed, Apr 21 '17 at 08:18
You have to debug each line of code then. Check on entering a character in the textbox whether it is calling the jquery method or not. Put debugger; at some points and verify the execution. — Naveen K N, Apr 21 '17 at 08:20
This code doesn't work. Couldn't get the JS function to even get called at all. — Dave Lucre, Oct 13 '19 at 00:14

Nondeplume · Answer 3 · 2020-01-08T20:41:38.393

I have been looking everywhere for references on a feature like this, myself.

I don't have enough rep to comment, but Naveen's answer worked for me after I started going one line at a time with console.log("PASS");. If the function is never called on an event like keyup, then it likely means one of the variable names is wrong or there is bad syntax. The reason you could not get any calls to the javascript was because of a missing }); which is an ending statement for JQuery functions. The end of the code for the scripting part should appear like so:

           }
        }); //END $.ajax
      }
    }
});         //END keyup function

score 0 · Answer 4 · answered Jun 11 '22 at 21:12

Using Razor, with T4MVC at an MVC5 project, we'll implement jQuery Autocomplete.

You should have inside your solution, one or more projects, and inside your project, among many other usual MVC5 things, the folders Models, Views and Controllers. And inside of them...

NuGet

Get the dependencies in place (your should know how to get them using Visual Studio):

jQuery: https://www.nuget.org/packages/jQuery/3.6.0
jQuery-UI: https://www.nuget.org/packages/jQuery.UI/

Then put them in the BundleConfig.cs files, at the App_Start folder:

using System.Web.Optimization;

namespace MyProject.Web
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles
                .Add(new ScriptBundle("~/bundles/jquery")
                    .Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery-ui.js",
                    ));

            bundles
                .Add(new StyleBundle("~/Content/css")
                    .Include(
                        "~/Content/jquery-ui.css"
                    ));
        }
    }
}

This will add the dependencies you´ll need to the view (see View section down below for more instructions).

Model

namespace MyProject.Web.Models.MyModelFolder
{
    public class MyModel
    {
        public string MyValue { get; set; }
        public string MyAnotherValue { get; set; }
        public string AndAnotherValue { get; set; }
    }
}

View

(Using Bootstrap)

@model MyProject.Web.Models.MyModelFolder.MyModel

<div class="ui-widget">
   @Html.LabelFor(model => model.MyValue)
   @Html.EditorFor(model => model.MyValue, new { htmlAttributes = new { @class = "form-control", id = "myTextbox" } })
   @Html.ValidationMessageFor(model => model.MyValue, "", new { @class = "text-danger" })
</div>

We'll be querying the MyValue field.

And add the dependencies from the BundleConfig.cs where you'll need them in your page:

<header>
    @Styles.Render("~/Content/css")
</header> 

<body>
   <p>Your Content</p>

   @Scripts.Render("~/bundles/jquery")
</body>

Adding the `Autocomplete`

There are two ways you can accomplish this, as:

Internal file to the page or,
as an external .js file.

NOTE: Autocomplete must be always below the required jQuery dependencies.

Internal file

In the .cshtml file. Inside your <body> tag, at the bottom of it:

<script>
   $("#myTextbox").autocomplete({
      source: '@Url.Action(MVC.MyController.MyMethod())'
   });
</script>

Or instead in the...(Choose one, not both!)

External file

In the Scripts folder. Remember to add this block at the bottom of your view to call the function from the outside.

@section Scripts {
    <script src="~/Scripts/autocomplete.js"></script>
}

And in the Scripts folder in a JS file add:

$(document).ready(function () {
    $("#myTextbox").autocomplete({
        source: '/MyController/MyMethod',
    });
})

You can see there the method you'll be calling from from the controller.

Controller

#region jQuery Method Calls

   using MyProject.Web.Models.MyModelFolder;

   public virtual JsonResult MyMethod(string term)
   {

      // _myViewModel is a partial model
      List<MyModel> MyAutocompleteList = new List<MyModel>();

      /* In this example I´m using AutoMapper, and getting back the List
      from the Database (layer, using Entity Framework), using Repository 
      Pattern (layer) and Unit of Work Pattern. */
      // But you can get the List however way you want.
      MyAutocompleteList = _theMapper.GetMyModelList(_operationsLayerService.GetMyModelList());
      
      // This LINQ query makes the magic happen
      var result = from U in MyAutocompleteList
                     where U.MyValue.Contains(term)
                     // It retrieves a composed string, not just a single value.
                     select  new { value = $"{U.MyValue} | {U.MyAnotherValue} {U.AndAnotherValue}" };

      // Security vulnerabilities? https://stackoverflow.com/a/21453075/7389293
      return Json(result, JsonRequestBehavior.AllowGet);
   }

#endregion

That's it.