Base solution for your next web application
Open Closed

autocomplete textbox #1787


User avatar
0
kythor created

Hi guys, I want to have a textbox with autocomplete. In a previous project, this worked and showed a dropdown under the textbox with all possible values.

So I added this now to MPA CreateOrEditModel:

<div class="form-group form-md-line-input form-md-floating-label ui-widget">
                        <input id="Tags" class="ui-autocomplete-input form-control@(Model.Article.Tags.IsNullOrEmpty() ? "" : " edited")"
                               type="text" name="Tags" autocomplete="off"
                               value="@Model.Article.Tags">
                        <label>@L("Tags")</label>
                    </div>
                    <script type="text/javascript">
                        $(function () {
                            function split(val) {
                                return val.split(/;\s*/);
                            }
                            function extractLast(term) {
                                return split(term).pop();
                            }
                            $("#Tags")
                            // don't navigate away from the field on tab when selecting an item
                            .bind("keydown", function (event) {
                                if (event.keyCode === $.ui.keyCode.TAB &&
                                $(this).data("ui-autocomplete").menu.active) {
                                    event.preventDefault();
                                }
                            })
                            .autocomplete({
                                source: function (request, response) {
                                    $.ajax({
                                        url: "/mpa/articles/AutocompleteTagSuggestions", type: "POST", dataType: "json",
                                        data: { term: request.term },

                                        success: function (data) {
                                            response($.map(data.result, function (item) {
                                                return { label: item, value: item, id: item };
                                            }));
                                        }
                                    })
                                },
                                search: function () {
                                    // custom minLength
                                    var term = extractLast(this.value);
                                    if (term.length < 2) {
                                        return false;
                                    }
                                },
                                focus: function () {
                                    // prevent value inserted on focus
                                    return false;
                                },
                                select: function (event, ui) {
                                    debugger;
                                    var terms = split(this.value);
                                    // remove the current input
                                    terms.pop();
                                    // add the selected item
                                    terms.push(ui.item.value);
                                    // add placeholder to get the comma-and-space at the end
                                    terms.push("");
                                    this.value = terms.join("; ");
                                    return false;
                                }
                            });
                        });
                    </script>

The ajax calls are working perfect but the dropdown with the results is not showing. This must be a CSS or jQuery UI thing maybe ABP is blocking or overriding? Any ideas?


2 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    It's related to z-index of modal dialog and ui-autocomplete classes. Just give a z-index bigger than 10050 to ul.ui-autocomplete and it should work in modals as well.

  • User Avatar
    0
    kythor created

    that seems to work. thx for the help