Question

我有一个输入框：

        <div id="myDiv" class="col-sm-10">
            {# Autocomplete text box #}
            <input class="form-control" type="text" name="myAutoComplete" id="MyAutocomplete1">
        </div>

我有一些jQuery来初始化这个文本框，所以它变成了一个＆＃34;自动完成＆＃34;框，用户键入几个字母，可以从列表中选择匹配。

当jQuery加载数据时（相当多，大约有10,000个条目），它需要一些时间 - 也许是5秒。如果用户在此期间输入自动填充框，显然自动填充功能无效，因为数据尚未完成加载。

如何添加＆＃34;加载状态＆＃34;到这个输入文本字段？我想要http://getbootstrap.com/javascript/#buttons类似的功能 - 经过一段时间而不是说'＃34;正在加载......＆＃34;它变得活跃了。

由于

Answer 1

想出来：

我做了这个JS功能：

function addLoadingToTextbox(textboxes, text, onload) {
    for (i = 0; i < textboxes.length; i++) {
        if (onload) {
            $(textboxes[i]).prop('disabled', 'true'); // disable
            $(textboxes[i]).val(text); // add loading text
        }

        else {
            $(textboxes[i]).removeAttr('disabled'); // re-enable
            $(textboxes[i]).val(''); // remove loading text
        }
    }
}

然后在你开始加载数据时就这样调用它（这将禁用该框并让它说加载.....）：

addLoadingToTextbox([$('#MyAutocomplete1')], 'LOADING.....', true);

要反过来，请运行：

addLoadingToTextbox([$('#MyAutocomplete1')], '', false);

因为textboxes参数采用数组，所以您可以一次传入多个元素（如果您正在对数据进行批量加载，这很方便）。

希望这有助于其他人。

Bootstrap - 在输入框中添加加载状态？

1 个答案: