Keyup Event Syntax Verständnisproblem von apfelsine, 27.07.2017 16:35

Keyup Event Syntax Verständnisproblem

apfelsine 27.07.2017 16:35

Hallo,

ich habe einen Javascript Code für eine Textbox geschrieben. Es geht eigentlich um Autovervollständigung - Es soll eine Dropdownliste mit Suchergebnissen angezeigt werden. Dazu wird ein AJAX POST an den Server gesendet, wo ein C# Controller die Ergebnisliste zurückliefern soll. Leider wird die Funktion im Controller aber nicht aufgerufen. Ich vermute, das Keyup Event wird nicht ausgelöst.

In den Beispielen die ich gefunden habe, gibt es unterschiedliche Herangehensweisen ein Keyup Event an eine Textbox zu koppeln.

In meinem Code funktionieren diese aber nicht und ich verstehe nicht wieso. Es sind JQuery Erweiterungen und ich hab meine Schwierigkeiten dahinter zu steigen, wann das funktioniert.

In meinem Fall funktioniert keins von beiden. Es wäre schön wenn mich jemand aufklären könnte. Ich bin für jeden Tip dankbar.

apfelsine

 $(document).ready()
{
//Version 1
 $("#SelectedStationStart").on("keyup", function(){ 
//... some code
}

//Version 2 
$("#SelectedStationStart").keyup(function () { 
//...
}
}

Mein Code sieht so aus:

<body>
<!--...some code… -->
<!--Javascript hier (siehe  unten)-->
<div id="targetDiv"><input type="text" id="SelectedStationStart" /><input type="hidden" id="StartId" /></div>
</body>

 <script type="text/javascript">
 $(document).ready()
            {
                $("#SelectedStationStart").on("keyup", function(){
                    //$("#SelectedStationStart").keyup(function () {
                    //get value from input textbox
                    var query = $(this).val();
                    //fetch values for searchterm
                    getItems(query);
                });

                function getItems(query) {
                    //handle search from inputfield
                    
                    var postData = {
                        searchvalue: request.term
                    };
                    addAntiForgeryToken(postData);

                    $.ajax({
                        cache: false,
                        type: 'POST',
                        url: '@Url.Action("SelectStation", "TicketSystem")',
                        data: postData,
                        dataType: 'json',
                        success: function (response) {
                            if (response.Data != null) {
                                if ($("#targetDiv") != undefined) {
                                    $("#targetDiv").remove();
                                }
                                data = response.Data;
                                //append data to div
                                $("#targetdiv").append($("<ul id='targetUI'></ul>"));
                                //removing previously added li
                                $("#targetdiv").find("li").remove();
                                //iterate trough list and 
                                $.each(data, function (i, value) {
                                    //stringvalue should be: id;stationname
                                    item = value.split(";");
                                    //on click call method
                                    $("#targetUI").append($("<li id='' onclick='javascript:setStartStation(" + item[0] + ",this)'>" + item[1] + "</li>"));
                                });
                            }
                            else {
                                //if data is null remove all items
                                $("#targetUI").find("li").remove();
                                $("#targetUI").remove();

                            }
                        },
                        error: function (xhr, status, error) {
                            alert(error);
                        }
                    });
                    
                }


                function setStartStation(id, value) {

                    $("#StartId").val = id;
                    $("#SelectedStationStart").val = value;
                    //remove dropdownlist
                    $("#targetUI").remove();
                }
}

</script>