Question

我想最后在<input type="text" />内显示一个加载器。我有一个自动完成字段，可能需要一些时间来加载其ajax查询，我想通过添加加载器向用户指示正在执行搜索。这就是我所拥有的：

            $(".autocomplete-ad-users").autocomplete({
                source: function (request, response) {
                    var $element = $(this.element);

                    var $loader = $("<div data-initialize='loader' class='loader'></div>");

                    $element.after($loader);
                    //start loading spinner
                    $loader.loader();
                    $loader.loader('play');

                    $.ajax({
                        url: '/Search/SearchADUsers',
                        data: { term: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.Name + " - " + item.UniqueId,
                                    value: item.Id,
                                    tag: item.UniqueId
                                }
                            }));
                        }
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    event.preventDefault();

                    var success = $(event.target).data('success');

                    //this allows us to apply 'data-success="functionName"' to an input
                    //with this class to override the default select function.
                        if (success) {
                            window[success](event, ui);
                        }
                        else {
                            UserSelected(event, ui);
                        }
                    }
            });

现在我在执行过程中看到了我的DOM树，并且在输入文本之后正确地添加了$loader元素，但它似乎没有高度和它的高度不可见。

任何想法在这里有什么问题？

编辑我错过了关于div的结束标记的正斜杠，但这并没有解决问题。

编辑了解相关的input字段位于引导模式上可能很重要。

编辑我现在通过将loader类添加到父元素来显示fuelux元素。但loader显示在输入字段下方。如何让它在结尾的输入字段中显示？将after()更改为append()并没有改变任何内容。

Answer 1

要在输入中移动加载器（至少在视觉上，而不是HTML元素本身），请给它position:relative并用top:-30px移动它。

显示＆＃34;装载机＆＃34;在输入文本中

1 个答案: