Анимация автозаполнения AngularMaterial не останавливается

Question

Анимация автозаполнения AngularMaterial не останавливается

0

Задний план:

Я изучаю AngularJS и использую AngularMaterial.

Чтобы проверить это, я решил создать пример из кода, приведенного в документации (check codepen). Мое приложение - приложение nodeJS в Cloud9 и очень простое.

Код:

Он разделен на 3 основных файлов, index.html (который содержит коробку автозаполнения), server.js (содержащих логику сервера) и autocomplete.js ( на стороне клиента логика).

Ниже приведены файл index.html а затем файлы autocomplete.js. Поскольку у меня есть сервер, работающий в Cloud9, и этот пример связан с ним, вы можете проверить небольшой пример работы в прямом эфире!

/*global angular*/

'use strict';
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('DemoCtrl', DemoCtrl);

function DemoCtrl($q, $log, $http) {
    
    this.searchText = null;
    
    this.querySearch =function(query) {
        let serverUrl = '//material-complete-fl4m3ph03n1x.c9users.io/getStates';
        let deferred = $q.defer();
        $http({
            method: 'GET',
            url: serverUrl,
            params: {
                word: query
            }
            
        }).then(function successCallback(response) {
            deferred.resolve(response.data);
        }, function errorCallback(response) {
            $log.error(response);
        });

        return deferred.promise;
    };

    this.searchTextChange = function(text) {
        $log.info('Text changed to ' + text);
    };

    this.selectedItemChange = function(item) {
        $log.info('Item changed to ' + JSON.stringify(item));
    };
}

<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body ng-app="MyApp" ng-cloak>

    <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp">
        <md-content class="md-padding">
            <form ng-submit="$event.preventDefault()">

                <md-autocomplete md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0"
                placeholder="What is your favorite US state?">
                    <md-item-template>
                        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
                    </md-item-template>
                    <md-not-found>
                        No states matching "{{ctrl.searchText}}" were found.
                    </md-not-found>
                </md-autocomplete>
                <br>

            </form>
        </md-content>
    </div>

    <!--CSS files-->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.css">
    <link rel="stylesheet" href="https://material.angularjs.org/1.1.0-rc4/docs.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

    <!-- Angular Material requires Angular.js Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.js"></script>

    <!-- Your application bootstrap  -->
    <script type="text/javascript" src="js/autocomplete.js"></script>
</body>

</html>

Кроме того, вот код моего файла server.js, который использует NodeJs и ExpressJs:

//Lets define a port we want to listen to
const PORT = 8080;

//Init Vars
var express = require('express');
var app = express();

//Init Functions
//we allow CORS: http://enable-cors.org/server_expressjs.html
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.listen(PORT, function() {
  console.log('Example app listening on port ' + PORT + '!');
});

//GET methods
app.get('/getStates', function(req, res, next) {

  var createFilterFor = function(query) {
    var lowercaseQuery = query.toLowerCase();

    return function filterFn(state) {
      return (state.value.indexOf(lowercaseQuery) > -1);
    };

  };

  //get parameters from GET: https://scotch.io/tutorials/use-expressjs-to-get-url-and-post-parameters
  var query = req.param('word');

  var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';

  var statesMap = allStates.split(/, +/g).map(
    function(state) {
      return {
        value: state.toLowerCase(),
        display: state
      };
    });

  var result = query ? statesMap.filter(createFilterFor(query)) : statesMap;
  res.send(result);
});

Что работает:

Теперь, если вы играете, вы можете выбрать американское государство в списке. Список фильтрует в соответствии с тем, что вы набираете, и позволяет вам выбрать что-то. Если вы используете инструменты разработчика, вы также можете увидеть журналы в консоли, еще раз продемонстрировав, что запрос работает, а также выбор.

Что нет:

Проблема здесь, когда вы очищаете текстовое поле. Если вы выберите состояние, а затем очистите его (нажав крестик или нажав Escape), вы увидите синюю полосу ниже поля ввода:

Это означает, что запрос выполняется. Проблема в том, что я не вижу отправки какого-либо запроса на сервер, а я застрял в бесконечном запросе! Даже когда, видимо, я этого не делаю!

Что мне здесь не хватает? Кто-нибудь может мне помочь?

дополнительный

Для тех, кого это интересует, вот репозиторий GitHub на примере!

https://github.com/Fl4m3Ph03n1x/material-complete

Вся помощь приветствуется!

Flame_Phoenix 03 июнь 2016, в 10:56

Источник

Теги:

javascript

angularjs

node.js

angular-material

autocomplete

2 ответа

1

Установите md-min-length в 1 - вы действительно не хотите предлагать доработки до внешней службы до тех пор, пока пользователь не начнет вводить текст.

<md-autocomplete 
  md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" 
  md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" 
  md-items="item in ctrl.querySearch(ctrl.searchText)" 
  md-item-text="item.display"
  md-min-length="1"
  placeholder="What is your favorite US state?">
  <md-item-template>
    <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
  </md-item-template>
  <md-not-found>
    No states matching "{{ctrl.searchText}}" were found.
  </md-not-found>
</md-autocomplete>

Ant Kennedy 03 июнь 2016, в 05:31

0

Если я делаю это таким образом, когда пользователь нажимает на поле, ничего не происходит. Я хотел бы показать все состояния, когда пользователь впервые нажимает на поле, поэтому мне нужно иметь min-length="0" . Если бы мне это не нужно, ваш ответ был бы принят. Престижность ++ за попытку.
Flame_Phoenix 03 июнь 2016, в 08:35

Ещё вопросы

Если я делаю это таким образом, когда пользователь нажимает на поле, ничего не происходит. Я хотел бы показать все состояния, когда пользователь впервые нажимает на поле, поэтому мне нужно иметь min-length="0" . Если бы мне это не нужно, ваш ответ был бы принят. Престижность ++ за попытку.

Mike Feltman · Accepted Answer · 2016-06-08T17-27-00.000Z

1

Лучший ответ

Вы возвращаете обещание из-за неправильного местоположения и не возвращаете цепочку должным образом, чтобы оно не разрешалось должным образом.

Попробуйте это (обратите внимание на возврат перед вызовом в $ http):

this.querySearch =function(query) {
    let serverUrl = '//material-complete-fl4m3ph03n1x.c9users.io/getStates';
    let deferred = $q.defer();
    return $http({
        method: 'GET',
        url: serverUrl,
        params: {
            word: query
        }

    }).then(function successCallback(response) {
        if(response.data.length>0) {
            deferred.resolve(response.data); }
        else {
            var nada=[]
            deferred.resolve(nada); }
        }
        return deferred.promise;
    }, function errorCallback(response) {
        $log.error(response);
        deferred.reject(response);
        return deferred.promise;
    });


};

Версия TL;DR из комментариев. Это известная ошибка, и исправление не выпущено на момент написания этой статьи. Обходной путь - либо откат до AM 1.06, либо использование css, чтобы скрыть панель прогресса. CSS:

md-autocomplete md-progress-linear { display: none; }

Mike Feltman 08 июнь 2016, в 17:27

0

Я проверил с тобой код и после выбора чего-то и очистки, я все еще получаю ту же проблему: S
Flame_Phoenix 09 июнь 2016, в 07:07
1

Я думаю, что вы также пропускаете еще одно возвращение. Я отредактировал ответ, чтобы отразить это.
Mike Feltman 09 июнь 2016, в 11:55
0

Все еще не работает, вы можете проверить пример здесь: preview.c9users.io/fl4m3ph03n1x/material-complete/client/… kudos ++ для попытки хотя ...
Flame_Phoenix 09 июнь 2016, в 12:31
1

Я думаю, что вы можете получить ошибку в материалах AM. Попробуйте добавить if (! Query) {return} вверху вашей функции и посмотрите, сможете ли вы просто предотвратить включение автозаполнения в этот момент.
Mike Feltman 09 июнь 2016, в 12:46
0

Может быть, я вижу что-то не так, но функция должна возвращать значение. Я попробовал то, что вы предложили (наряду с другими вариантами, где я пытаюсь предотвратить серверный вызов), и результат всегда один и тот же: он взрывается!
Flame_Phoenix 09 июнь 2016, в 13:32
0

Да, я думаю, что это ключ. Попробуйте правки выше. Я не уверен, что ты этого хочешь. Я думаю, что вы хотите, чтобы все состояния были такими, как если бы вы отказались от результата. Когда вы нажимаете кнопку закрытия или экранирование, значение запроса должно быть другим. Вы могли бы просто сделать, если (! Query) {query = ''} в верхней части вашей функции, чтобы заставить пустую строку, если это так.
Mike Feltman 09 июнь 2016, в 13:48
0

Тоже попробовал, но, похоже, ничего не работает ... Честно говоря, я не знаю, что может быть причиной этого ...
Flame_Phoenix 09 июнь 2016, в 14:19
0

Я попытался сравнить то, что вы делаете, с парой md-autocompletes в моем приложении, и я не вижу никаких реальных отличий, и я не вижу такого поведения с моим. Единственное отличие, которое я вижу, это не связано с приложением, это то, что у меня md-no-cache = "true" и md-min-length = "3"
Mike Feltman 09 июнь 2016, в 14:52
0

Если вы разрешите кеширование и установите для input-min значение 0, вполне вероятно, что вы увидите такое же поведение.
Flame_Phoenix 09 июнь 2016, в 14:54
0

Возможно, но я не могу найти 10 000 записей, чтобы выяснить это. :)
Mike Feltman 09 июнь 2016, в 14:56
0

Итак, выясняется, что это известная ошибка: github.com/angular/material/issues/8301 Я не уверен, были ли еще выпущены изменения. Он был закрыт 10 дней назад. Изменения кода, связанные с обещаниями, которые я рекомендовал выше, все же должны быть полезны для вас. :)
Mike Feltman 09 июнь 2016, в 14:58
0

Черт, стыд .... Дело в том, что если я добавлю md-min-length=3 (или больше нуля), у меня не возникнет этой проблемы. Однако сейчас мне нужно, чтобы оно было = 0.
Flame_Phoenix 09 июнь 2016, в 14:59
0

Жук ? Я так много ... ну, это не будет исправлено . Angular Material официально устарел и снят с производства, никто не исправит это. Вместо этого они работают в Angular Material 2.0 (для AngularJS 2.0). Если вы можете добавить это в свой ответ, я приму это и вознагражу вас щедростью.
Flame_Phoenix 09 июнь 2016, в 15:01
0

Я не думаю, что это правда. Они только добавили несколько новых функций и заявили на своей домашней странице, что они «сосредоточены на исправлении ошибок и незначительных улучшениях». Есть коммиты на прошлой неделе. Вы используете версию кандидата версии. Возможно, вы сможете вернуться к 1.06 и избежать этого. Кроме того, поскольку ваш запрос в значительной степени мгновенный и кэшированный, вы можете использовать обходной путь, упомянутый в отчете об ошибке, просто немного CSS: md-autocomplete md-progress-linear {display: none; }
Mike Feltman 09 июнь 2016, в 15:06
0

Хорошо, я сделаю это! Я думал, что это было прекращено после этого: groups.google.com/forum/#!topic/ngmaterial/4ActiQp3nA0
Flame_Phoenix 09 июнь 2016, в 15:15
0

Работал ли откат или использование подхода CSS?
Mike Feltman 09 июнь 2016, в 18:58
1

Я откатился на 1.0.6. Это сработало ! Вы по праву заработали себе награду! Желаю вам удачи, и я надеюсь, мы увидимся еще раз! Я уверен, что мне понадобится ваша помощь снова в будущем: p
Flame_Phoenix 10 июнь 2016, в 08:59

Показать ещё 15 комментариев