Adding Autocomplete and TagEditor Jquery to MVC

Question

I'm looking to combine the AutoComplete and TagEditor features together, drawing the data to be used from a database. This is going to go on to populate a new entry as an string, but for now I'm just focusing on getting the features working.

So far, I've tried a couple of different approaches, from both the original examples to links here like jquery-ui-autocomplete-asp-net-mvc5-rendering-as-a-list, but I'm not going around in circles.

I have 2 main issues, and I'm not sure if they are linked or not.

Firstly, The TagEditor feature is working on my site as a standalone field. I set up a partial view as a test with 2 fields in place. The top one is formatting correctly as a Tag TextArea as expected, but the bottom one is where I am trying to link this into a HTML helper for a string field, it doesn't pick up the JQuery element.

_SkillSearch.cshtml

@model NR.Models.Critvit

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<hr />
<div class="form-horizontal">
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.KeySkills, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <textarea class="skills"></textarea>
                @Html.ValidationMessageFor(model => model.KeySkills, "", new { @class = "text-danger" })
            </div>
        </div>
        <br />
        <hr />

        <div class="form-group">
            @Html.LabelFor(model => model.KeySkills, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.KeySkills, new { htmlAttributes = new { id = "skills", @class = "skills form-control" } })
                @Html.ValidationMessageFor(model => model.KeySkills, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

}

Secondly, the query doesn't want to use any of the Source values set in the function. This is the most recent version, where I'm trying to get the list of skills from the db and use them as the Source array's. I'm not seeing any JSON activity when I run the page and use the fields either. This is a couple of different ways I've tried.

Script in _Layout.cshtml - Version 1

<script>
$(document).ready(function () {
    $('#skillslist').tagEditor({
        autocomplete: {
            delay: 0, position: { collision: 'flip' },
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    url: "/skills/search",
                    dataType: "json",
                    data: {
                        term: request.term
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        alert('Error: ' + xhr.responseText);
                    },
                    success: function(data) {
                        response($.map(data, function(c) {
                            return {
                                label: s.SkillName,
                                value: s.SkillId
                            }
                        }));
                    }
                });
            },
                forceLowercase: false,
                placeholder: 'Skills Titles (placeholder) ...'
            }
        });
});

Script in _Layout.cshtml - Version 2

<script type="text/javascript">
$(document).ready(function () {
    $('.skills').tagEditor({
        autocomplete: {
            delay: 0, position: { collision: 'flip' },
            source: '@Url.Action("GetSkillList")'},
                forceLowercase: false,
                placeholder: 'Skills Titles (placeholder) ...'
        });
});
</script>

Home Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using NR.DAL;
using NR.Models;

namespace NR.Controllers
{
public class HomeController : Controller
{
    private NRContext db = new NRContext();

    public ActionResult Index()
    {
        return View();
    }

    [Cut for space]

    public ActionResult GetSkillList(string term)
    {
        var result = from s in db.Skills
                     where s.SkillName.ToLower().Contains(term)
                     select s.SkillName;
        return Json(result.ToList(), JsonRequestBehavior.AllowGet);
    }
}

}

Answer 1

To close out and answer:

@stephenmuecke got me on the right track to ensure the Json include ToList and the bundle was correct.