javascript - bootstrap - AngularJs UI typeahead coincide con los personajes principales

angularjs bootstrap

Question

La funcionalidad de typeahead en la interfaz de usuario de AngularJs parece simple y poderosa, sin embargo, he estado tratando de averiguar cómo hacer que el emparejamiento se realice en los personajes principales. Por ejemplo, si escribo ''A'' en el cuadro de entrada, me gustaría ver todos los estados que comienzan con ''A "y no todos los estados que contienen una'' A ''en el nombre. He estado buscando durante un par de días en esto y parece que Angular tiene el concepto de un filtro personalizado que tiene un ''comparador''. Los documentos de este tienen un ejemplo simple que no muestra la sintaxis exacta para implementar un comparador.

El html se ve así:

<div>Selected: <span>{{selected}}</span></div>
    <div><input type="text" ng-model="selected" typeahead="name for name in states | filter:selected"></div>

El javascript básico se ve así

angular.module(''firstChar'', [''ui.bootstrap'']);

    function TypeaheadCtrl($scope) {
        $scope.selected = undefined;
        $scope.states = [''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 Dakota'', ''North Carolina'', ''Ohio'', ''Oklahoma'', ''Oregon'', ''Pennsylvania'', ''Rhode Island'', ''South Carolina'', ''South Dakota'', ''Tennessee'', ''Texas'', ''Utah'', ''Vermont'', ''Virginia'', ''Washington'', ''West Virginia'', ''Wisconsin'', ''Wyoming''];
    }

Tengo un plunker aquí http://plnkr.co/edit/LT6pAnS8asnpFEd5e6Ri

Entonces, el desafío en pocas palabras es lograr que la tipografía de AngularUI coincida solo con los personajes principales.

Cualquier ayuda o ideas sobre esto serían enormemente apreciadas.

Answer 1

Acabo de editar la publicación marcada como respondida y funciona cuando la lista tiene Id y título:

<input type="text" ng-model="ledgerstatementModel.Supplier" typeahead="supplier as supplier.Name for supplier in supplierList | filter:{Name:$viewValue}:startsWith" class="form-control">

y en js:

 $scope.startsWith = function (supplier, viewValue) {
        return supplier.substr(0, viewValue.length).toLowerCase() == viewValue.toLowerCase();
    }

Answer 2

Al final del día, su pregunta no es realmente específica de la directiva de typeahead pero tiene más que ver con cómo funcionan los filtros AngularJS.

Antes de presentar una solución de trabajo, tenga en cuenta que la directiva typeahead hace un uso intensivo de la infraestructura AngularJS ($ http, promises) y el lenguaje de expresión. Por eso es importante darse cuenta de que los states | filter:selected states | filter:selected no es más que una expresión AngularJS.

Mirando la expresión anterior, necesitamos encontrar una forma de filtrar una matriz para devolver una lista de elementos coincidentes. Lo único especial de la directiva de typeahead es que hay una variable $viewValue que representa un valor ingresado por un usuario en el cuadro de entrada. Básicamente, solo necesitamos filtrar la matriz de states para devolver los elementos que comienzan con $viewValue .

Hay muchas formas de hacerlo, pero como mencionó el comparador para los filtros (tenga en cuenta que solo se introdujeron en la versión 1.1.x de AngularJS) tendría que definir una función de comparador que debería decidir si un elemento determinado debería ser Devuelto en la lista de resultados o no. Tal función podría verse como sigue:

$scope.startsWith = function(state, viewValue) {
  return state.substr(0, viewValue.length).toLowerCase() == viewValue.toLowerCase();
} 

Haber definido el uso es muy simple:

typeahead="name for name in states | filter:$viewValue:startsWith"

Aquí está el plunk de trabajo: http://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?p=preview

Answer 3

Filtro personalizado para obtener la coincidencia que se realizará en los caracteres iniciales en el cuadro de autocompletar automáticamente.

(function() {

    // Create global filters using angular.filter() only. Never use local filters inside
    // controllers/services. This enhances testing and reusability.
    function xpTypeaheadFilter() {
          return function(items, props) {

            var out = [];
            
            if (angular.isArray(items)) {

              items.forEach(function(item) {
                
                


                var text = props.toLowerCase();
                var itemLoverCase =item.toLowerCase();
                var substr = itemLoverCase.substr(0, text.length);

                 
                if (substr === text ) {
                    
                     out.push(item);
                     
                }
                

              });
            } else {
              // Let the output be the input untouched
              out = items;
            }
            console.log("out lem", out.length);

            return out;
          };
    }

    // Pass functions into module methods rather than assigning a callback.
    // This helps aid with readability and helps reduced the amount of code "wrapped"
    // inside Angular.
    angular.module(''common'')
    .filter(''xpTypeaheadFilter'', xpTypeaheadFilter);
})();

<input type="text" ng-model="vesselName" placeholder="Vessel Name" typeahead="vesselName for vesselName in vesselNames | xpTypeaheadFilter:$viewValue | limitTo:8"  class="form-control form-textbox" >