Автозаполнение потери фокуса из-за библиотеки angular-block-ui - PullRequest
0 голосов
/ 16 ноября 2018

Я использую библиотеку angular-block-ui для обработки всех моих запросов http, чтобы предотвратить ввод пользователя.

Я реализовал функцию автозаполнения на своей веб-странице, используя input и datalist элемент.Моя проблема в том, что каждый раз, когда я вводю значение в автозаполнение, block-ui как-то вызывает то, что datalist теряет фокус и вызывает мерцание datalist.После мерцания вы должны нажать datalist, чтобы увидеть данные.

Я пытался использовать следующий фрагмент кода, чтобы предотвратить появление block-ui при вводе значения в мой элемент input.

blockUI.stop();

Ссылка: https://github.com/McNull/angular-block-ui

Однако это не работает.Кто-нибудь сталкивался с такой же проблемой с block-ui и смог ее решить?Буду очень признателен за любые отзывы, которые помогут решить мою проблему.

HTML:

<input id="product-code" class="col-md-2" type="text" placeholder="Product Code" name="productCode" list="search-list" ng-keyup="searchForProducts(productCode)" ng-model="productCode" />
<datalist id="search-list">
    <option ng-repeat="productCode in productCodeList" value="{{productCode}}">
</datalist>

JavaScript:

$scope.searchForProducts = function (productCode) {

    let code = productCode != undefined ? productCode : "";

    // when the product code is empty don't bother searching for products
    if (code != "") {

        worksOrderFactory.searchForProductCodes(productCode).then(function (data) {
            blockUI.stop();
            $scope.productCodeList = data;
        });
    }
};

Я также использовал blockUI.stop(); снаружиобещание, но все еще не повезло.

Примечание: во время тестирования я удалил block-ui с моего сайта, автозаполнение работает как нужно.

1 Ответ

0 голосов
/ 19 ноября 2018

Итак, после проб и ошибок я наконец-то смог решить мою проблему. Я успешно предотвратил появление block-ui со следующей строкой кода перед моим http вызовом.

blockUIConfig.requestFilter = function () {
    return false;
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...