Comment faire de la saisie semi-automatique comme google de suggestion automatique angulaire de l'interface utilisateur, sélectionnez

Je suis angulaire à l'aide de l'interface utilisateur-sélectionnez pour la saisie semi-automatique. Lorsque l'utilisateur commence à taper, je veux montrer le meilleur élément correspondant, comme en filigrane, et lorsque l'utilisateur appuyez sur la touche tab, il doit être sélectionné (même comme google de suggestion automatique)

Veuillez voir l'image aussi. vous pouvez voir que, quand je tape "auto", "complete" apparaît en filigrane et si je pres ONGLET, il sera sélectionné.

Comment faire de la saisie semi-automatique comme google de suggestion automatique angulaire de l'interface utilisateur, sélectionnez

OriginalL'auteur jintoppy | 2015-05-25

  1. 3

    il y a une charmille plugin autocompletelikegoogle et vous pouvez créer un angulaire de la directive de rendre la saisie semi-automatique d'entrée dans votre application.

    Directive.js

    angular.module('app').directive('autoComplete', [
  '$timeout', function($timeout) {
    return function(scope, element, attrs) {
      var auto;
      auto = function() {
        $timeout((function() {
          if (!scope[attrs.uiItems]) {
            auto();
          } else {
            element.autocomplete({
              source: [scope[attrs.uiItems]]
            });
          }
        }), 5);
      };
      return auto();
    };
  }
]);

    HTML exemple d'utilisation

    <input type="text" auto-complete ui-items="list" ng-model="yourModel" class="form-control" placeholder="Tipe something" />

    La liste des variables contient un tableau de vos résultats possibles dans la saisie semi-automatique d'entrée, est définie dans l'attribut appelé ui-éléments.

    À l'aide de votre réponse ne fonctionne pas pour moi. Mon modèle variable est mise à jour uniquement à la partielle de la sous-chaîne qui a été tapé à la machine et de ne pas le plein match ... toutes les idées comment réparer? Voir le DONC, la question ici stackoverflow.com/questions/47203963/...

    OriginalL'auteur nahualli

  2. 1

    Utilisation angulaire de l'interface utilisateur, sélectionnez la bibliothèque...Il fera appel RESTE pour obtenir des données à partir de systèmes backend pour la saisie semi-automatique de liste déroulante....et pour le filigrane..Vous pouvez le modifier via CSS.
    pour la bibliothèque, vous trouverez URL:https://github.com/angular-ui/ui-select

    dans l'interface utilisateur-sélectionnez, si vous tapez quelque chose, il va mettre en évidence dans la saisie semi-automatique de liste déroulante. Cependant, je ne pourrais pas trouver un exemple où il montre le meilleur article correspondant dans la zone de texte lui-même, même avant de choisir, et le présentant comme un filigrane élément

    OriginalL'auteur chetanpawar