在输入文本中显示 "Loader"

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 的结束标记上遗漏了正斜杠，但这并没有解决问题。

EDIT 知道有问题的 input 字段在 bootstrap 模态上可能很重要。

EDIT 我现在通过将 fuelux class 添加到父元素来显示 loader 元素。但是 loader 显示在输入字段下方。我怎样才能让它显示在最后的输入字段中？将 after() 更改为 append() 没有任何改变。

Answer 1

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

在输入文本中显示 "Loader"

Show "Loader" in Input Text

jquery

twitter-bootstrap

fuelux