0

I have a situation where I have a jquery autocomplete field that I would also like to make a placard for (http://getfuelux.com/javascript.html#placard). I've got everything set up fine. When I click the field, the placard shows up, and I can still type into the field to receive suggestions.

The problem comes in when I attempt to click one of the suggestions. It calls my select: function as expected, which populates the text input. But then as the event cascades it triggers the "cancel" (I'm guessing here) event on the placard, which resets the value of the input to default and removes the placard visual.

Here's the gist of the code:

HTML

            <label class="control-label">Select User:</label>
            <div class="placard" data-initialize="placard">
                <div class="placard-popup"></div>
                <input class="autocomplete-web-users placard-field glass form-control" id="Approver_FirstName" name="Approver.FirstName" type="text" value="" />
                <div class="placard-footer">
                    <a class="placard-cancel" href="#">Cancel</a>
                    <button class="btn btn-primary btn-xs placard-accept" type="button">Confirm</button>
                </div>
            </div>

JS

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

            var $loader = $("<span style='font-size: 1em; position: relative; top: -25px; right: 20px;' data-initialize='loader' class='loader'></span>");

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

            $.ajax({
                url: '/Search/SearchWebUsers',
                data: { term: request.term },
                success: function (data) {

                    var results = $element.data('results');
                    //data loaded, destroy data spinner
                    $loader.loader('destroy');
                    response($.map(data, function (item) {
                        return {
                            label: item.Name,
                            value: item.Id,
                            tag: item.UniqueId,
                            id: item.Id
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            event.preventDefault();

            $(event.target).parents().find(".placard").placard('setValue', ui.item.tag);
        }
    });

JS PLACARD INITIALIZATION

$(".placard").placard();

I've fiddled with the "explicit" and "externalClickAction" options, but can't seem to get anything to work. Any ideas? I can't find anything about fuel ux on the intertubes.

Tevis
  • 729
  • 1
  • 12
  • 27
  • Did you add your "dropdown menu" selector to the `externalClickExceptions ` array? It will need to be set at first initiation. http://getfuelux.com/javascript.html#placard-usage-options – Interactive Llama Mar 12 '15 at 21:56
  • Thank you! Can't believe I kept overlooking that option. Out of curiosity, what exactly does "explicit" do? It seemed to me that it should make the placard stay up indefinitely until one of the buttons was clicked, but it always went away with an external click. – Tevis Mar 13 '15 at 13:39
  • Well I get into the office today and explicit seems to be working the way I expected now... color me confused :) – Tevis Mar 13 '15 at 13:54

0 Answers0