Question

我有一个drodownlist，应该填充来自服务器的数据，按给定的字符过滤。当用户键入至少3个字符时，应该会发生这种情况。调用函数 SearchStartStation（值），然后从服务器获取一个项目列表以填充组合框。

我的问题：我在哪里放置onkeyup事件以及我的通话方式如何。我很困惑如何获得输入字段的inputvalue。

我使用示例中的代码（https://jqueryui.com/resources/demos/autocomplete/combobox.html）来部分完成此操作。我在onkeyup上调用函数的部分是那个还没有工作的部分。到目前为止，我尝试了几种方法但没有成功：

我所说的部分是：

this.input = $("<input>").appendTo(this.wrapper).val(value).attr("title", "").addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left").autocomplete({
    delay: 0,
    minLength: 3,
    source: $.proxy(this, "_source")
}).attr("change", function() {
    if (value != null) {
        SearchStartStation(value)
    }
}).attr("onkeyup", function() {
    if (value != null) {
        SearchStartStation(value)
    }
}).tooltip({
    classes: {
        "ui-tooltip": "ui-state-highlight"
    }
});

我必须将事件添加到输入字段，但我正在努力使用javascript / jQuery函数/语法，到目前为止我还没有尝试过。

这是一个组合框小部件的javascript部分，它在整个页面的几个框中使用。：

$.widget("ui.combobox", {
    _create: function() {
        this.wrapper = $("<span>").addClass("custom-combobox").insertAfter(this.element);
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
    },
    _createAutocomplete: function() {
        var selected = this.element.children(":selected"),
            value = selected.val() ? selected.text() : "";
        this.input = $("<input>").appendTo(this.wrapper).val(value).attr("title", "").addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left").autocomplete({
            delay: 0,
            minLength: 3,
            source: $.proxy(this, "_source")
        }).attr("change", function() {
            if (value != null) {
                SearchStartStation(value)
            }
        }).attr("onkeyup", function() {
            if (value != null) {
                SearchStartStation(value)
            }
        }).tooltip({
            classes: {
                "ui-tooltip": "ui-state-highlight"
            }
        });
        this._on(this.input, {
            autocompleteselect: function(event, ui) {
                ui.item.option.selected = true;
                this._trigger("select", event, {
                    item: ui.item.option
                });
            },
            autocompletechange: "_removeIfInvalid"
        });
    },
    _createShowAllButton: function() {
        var input = this.input,
            wasOpen = false;
        $("<a>").attr("tabIndex", -1).attr("title", "Show All Items").tooltip().appendTo(this.wrapper).button({
            icons: {
                primary: "ui-icon-triangle-1-s"
            },
            text: false
        }).removeClass("ui-corner-all").addClass("custom-combobox-toggle ui-corner-right").on("mousedown", function() {
            wasOpen = input.autocomplete("widget").is(":visible");
        }).on("click", function() {
            input.trigger("focus");
            // Close if already visible
            if (wasOpen) {
                return;
            }
            // Pass empty string as value to search for, displaying all results
            input.autocomplete("search", "");
        });
    },
    _source: function(request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response(this.element.children("option").map(function() {
            var text = $(this).text();
            if (this.value && (!request.term || matcher.test(text))) return {
                label: text,
                value: text,
                option: this
            };
        }));
    },
    _removeIfInvalid: function(event, ui) {
        // Selected an item, nothing to do
        if (ui.item) {
            return;
        }
        // Search for a match (case-insensitive)                
        var value = this.input.val(),
            valueLowerCase = value.toLowerCase(),
            valid = false;
        this.element.children("option").each(function() {
            if ($(this).text().toLowerCase() === valueLowerCase) {
                this.selected = valid = true;
                return false;
            }
        });
        // Found a match, nothing to do
        if (valid) {
            return;
        }
        // Remove invalid value
        this.input.val("").attr("title", value + " didn't match any item").tooltip("open");
        this.element.val("");
        this._delay(function() {
            this.input.tooltip("close").attr("title", "");
        }, 2500);
        //this.input.autocomplete( ui.name ).term = "";
    },
    _destroy: function() {
        this.wrapper.remove();
        this.element.show();
    }
});
$("#MyList").combobox();
$("#toggle").on("click", function() {
    $("#MyList").toggle();
});

这是上面提到的SearchStartStation函数：

 function SearchStartStation(obj) {
     var input = obj.val;
     alert(input);
     //if (input.length > 2)
     //  alert(input);
     $.ajax({
         url: '@Url.Action("SelectStation", "DDSAboProductPage")',
         type: "GET",
         dataType: "JSON",
         data: {
             searchvalue: input
         },
         success: function(stations) {
             $("#MyList").html(""); // clear before appending new list 
             $.each(stations, function(i, station) {
                 $("#MyList").append($('<option></option>').val(station.Value).html(station.Text));
             });
         }
     });
 }

HTML部分：

<select id="MyList" ></select>

任何帮助非常感谢！提前谢谢！

修改我试过这个变种：

  this.input = $( "<input>" )
                .appendTo( this.wrapper )
                .val( value )
                .attr("title", "")                    
                .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                .autocomplete({
                    delay: 0,
                    minLength: 3,
                    source: $.proxy( this, "_source" )
                })
                .change(function () { if (value != null) { SearchStartStation(value) } })
                .onkeyup(function () { if (value != null) { SearchStartStation(value) } })
                .tooltip({
                    classes: {
                        "ui-tooltip": "ui-state-highlight"
                    }
                });

没有成功。我得到一个Javascript错误说未捕获的TypeError：$（...）。appendTo（...）。val（...）。attr（...）。addClass（...）。autocomplete（...）。change（... ）.onkeyup不是一个函数

我也试过这个。它不会给我错误，但它也不起作用。我真的很困惑，哪里是正确的地方放置onkeyup-Event：

this._on(this.input, {
            onkeyup: function(event,ui){
                if (value != null) { SearchStartStation(value) } }})

Answer 1

最后我更容易解决这个问题。我没有使用简单的输入字段，而是使用JQuery Autocomplete来获取我想要的内容。

但首先，对于那些像我一样陷入相同Javascript Jquery Confusiontrap的人。事件是keydown不是onkeydown（感谢Twisty）。我的问题的解决方案是：

   this.input = $( "<input>" )
                .appendTo(this.wrapper)
                .on("keydown", function () {
                    SearchStartStation(value);
                })
                .val( value )
                .attr("title", "")
                .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                .autocomplete({
                    delay: 0,
                    minLength: 3,
                    source: $.proxy( this, "_source" )
                })
                .tooltip({
                    classes: {
                        "ui-tooltip": "ui-state-highlight"
                    }
                });

以下是我最终的表现：

<body>
        <script type="javascript">
        $(function(){
         $("#StationStart").autocomplete({
                             source: function (request, response) {
                                 var postData = {
                                     searchvalue: request.term
                                 };
                                 addAntiForgeryToken(postData);

                                $.ajax( {
                                    cache: false,
                                    type: 'POST',
                                    url: '@Url.Action("SelectStation", "DDSAboProductPage")',
                                    data: postData,
                                    dataType: 'json',

                                    success: function( data ) {
                                        response( data );
                                    }
                                } );
                            },
                            minLength: 3,
                            select: function( event, ui ) {
                                document.getElementById("SelectedStationStart").value= ui.item.value;
                                text = ui.item.value;
                                data = text.split(";");
                                ui.item.value = data[1];
                            }});

    )};

</script>
<input id="StartStation"><input id="SelectedStationStart" type="hidden" />
</body>

在jquery Dropdownlist

1 个答案: