0

I would like to show a loader inside an <input type="text" /> at the end. I have an autocomplete field that can take some time to load its ajax query, and I would like to indicate to the user that a search is being performed by adding the loader. Here's what I have:

            $(".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);
                        }
                    }
            });

Now I've watched my DOM tree during execution and the $loader element is being properly added after the input text, but it doesn't seem to have a height and it's not visible.

Any ideas what's wrong here?

EDIT Well I was missing my forward slash on the closing tag for the div, but that didn't solve the problem.

EDIT It may be important to know that the input field in question is on a bootstrap modal.

EDIT I've now gotten the loader element to display by adding fuelux class to the parent element. But the loader is displaying beneath the input field. How can I get it to display inside the input field at the end? Changing after() to append() didn't change anything.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Tevis
  • 729
  • 1
  • 12
  • 27
  • Did you give `
    ` dimensions in CSS?     – Jeremy Thille Mar 10 '15 at 14:16
  • Well `loader` is defined by fuelux. However, with your prompting I did discover that I needed to put `fuelux` in the parent for the style to be applied. It is displaying now, but it is showing underneath the input text. Any idea how I can get it inside the input field? – Tevis Mar 10 '15 at 14:37
  • Yep, give it a `position:relative` and move it around with `top:-30px` for instance – Jeremy Thille Mar 10 '15 at 14:40
  • Sweet! Got it working. It took me a second to figure out that loader is a font for scaling purposes (change `font-size` instead of `transform`, but it's looking great now. If you want to write in an answer I'll accept! – Tevis Mar 10 '15 at 14:48

1 Answers1

1

To move the loader inside the input (at least visually, not the HTML element itself), give it a position:relative and move it around with top:-30px for instance.

Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63