Question

我有一种情况，我有一个jquery自动完成字段，我也想为（http://getfuelux.com/javascript.html#placard）制作标语牌。我已经把一切都搞定了。当我单击该字段时，标语牌会显示，我仍然可以在字段中输入以接收建议。

当我尝试点击其中一个建议时出现问题。它按预期调用我的select:函数，填充文本输入。但随后事件级联它会触发＆＃34;取消＆＃34; （我在这里猜测）标语牌上的事件，它将输入值重置为默认值并删除标语牌视觉。

以下是代码的要点：

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();

我已经摆弄了＆＃34;明确＆＃34;和＆＃34; externalClickAction＆＃34;选项，但似乎没有任何工作。有任何想法吗？我无法在intertubes上找到关于燃料ux的任何信息。

在jQuery自动完成字段上使用Fuel ux标语牌

0 个答案: