Wie die Umsetzung Autocomplete Textbox in MVC

Stehe ich vor einem problem in autocompleting die textbox vith hardcoded Daten, mein json "Suchen" - Methode nicht ausgelöst, ich Suche eine Menge code zu implementieren, die es in meinem Projekt aber nicht den Erfolg noch. ich weiß nicht, wo das problem ist. bitte helfen Sie mir thankx im Voraus

Modell:

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

Anzeigen:

@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" />
Sie verwenden müssen, um AJAX-Aufruf im Quellcode-Zuordnung: source: function (request, response) { $.ajax({ ... }) }) mit URL-parameter festlegen, wie url: '@Url.Action("Search")' zu tun, oder das hinzufügen query string-parameter in Url.Action Helfer-Methode.
versuchte dies, aber ich weiß nicht wo das problem her kam raus, nichts passiert 🙁
Auch die Json-Methode nicht aufrufen, wo die Liste ist, binden

InformationsquelleAutor Muhammad Aamir Majeed | 2017-04-21

  1. 0

    Die Sie benötigen, um ajax-request statt der übergabe einfach mit url in der Datenquelle.

    <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>

    Sehen, wie Sie mit autocomplete mit ajax-request.

    Nichts passiert, ich habe bereits versucht diese Lösung aber immer noch das problem ist das gleiche
    Haben Sie jquery beacuase es funktioniert, auf mein Ende.
    ja @Amit Kumar, die ich aufgenommen haben, das die Jquery-an der Spitze der meine Ansicht Seite Wie diese ... ist das du redest ??
    <link href="~/Content/Autocomplete/jquery-ui.css" /> <script src="~/Content/Autocomplete/jquery-ui.js"></script> <link href="~/Content/Autocomplete/jquery-ui.Thema.css" />
    außerdem müssen Sie die jquery-bundle. <script src="~/Content/jquery-1.12.4.js"></script>

    InformationsquelleAutor Amit Kumar

  2. 0

    Habe ich implementiert diese in mein Projekt. Bitte prüfen Sie, ob Sie davon Gebrauch machen kann

    <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);
    }
    Nichts Passiert mit diesem code 🙁
    welche Fehler hast du?
    es ist nichts zu zeigen, wenn ich beginnen Sie mit der Eingabe in textbox-auch wenn es nicht das Feuer die json-Methode
    Sie haben zu Debuggen, die jede Zeile code dann. Prüfen Sie nach Eingabe eines Zeichens in die textbox, ob es den Aufruf der jquery-Methode oder nicht. Setzen debugger; an einigen stellen und überprüfen die Ausführung.
    Seine nicht den Aufruf der Jquery-Methode

    InformationsquelleAutor Naveen K N

Schreibe einen Kommentar