Winkeldropdown mit Autocomplete

Ich benutze Bootstrap mit Angularjs.Ich habe viele Dropdown-Menüs in meiner Seite und möchte die Funktionalität implementieren, da es ein Textfeld geben sollte, das im Array Daten zeigt und bei der Eingabe Autocomplete-Funktionalität zeigt.Winkeldropdown mit Autocomplete

Ich habe 2 Ansätze mit Autocomplete versucht, aber sie zeigen nur Daten über die Eingabe.wenn wir nichts Daten in Drop-Down eingeben wird nicht angezeigt. wie This Directive

<angucomplete id="ex1" placeholder="Select Nationality" selectedobject="std.NATIONALITY_ID" localdata="nationalities" searchfields="description" titlefield="description" minlength="1" inputclass="form-control form-control-small"/> 
    </div>

Dies ist nur Daten über die Eingabe zeigt Ich möchte eine Liste auf Fokus und die automatische Vervollständigung auf typing.Kindly vorschlagen, einen Ansatz oder eckig oder Bootstrap dafür.

Quelle

2016-07-05 N.A

Ich hoffe, dieser Link hilft Ihnen für Autocomplete-Dropdown: http://embed.plnkr.co/jBJkDb Aber es ist mit ui-Select Bitte beachten Sie, dass.

Quelle

2016-07-05 13:18:24 VjyV

Er fragt nach einem Weg, dies mit dem Modul zu tun, das er benutzt. – developer033

Zunächst einmal sollten Sie gelesen haben, was sie sagten über ihre Modul auf ihre Github:

HINWEIS: Ich nicht mehr aktiv dieses Repository mantain. Ich habe jetzt angefangen, ReactJS zu benutzen und es ist ein Hauch frischer Luft im Vergleich zu AngularJS. Wenn Sie noch Angular verwenden und eine Komponente zur automatischen Vervollständigung benötigen würde ich Sie ermutigen, an dieser Gabel von meiner ursprünglichen Angucomplete aussehen: angucomplete-alt

Um das neuen Modul verwenden Sie müssen nur einige Änderungen tun, dass ich Habe schon gemacht und es scheint zu funktionieren wie du es erwartet hast.

Snippet:

var app = angular.module('app', ['angucomplete-alt']); 
 

 
app.controller('mainCtrl', function($scope) { 
 
    $scope.selectedObj = {}; 
 
    $scope.nationalities = [ 
 
    { 
 
     "NATIONALITY_ID": 1, 
 
     "description":"Afghan" 
 
    }, 
 
    { 
 
     "NATIONALITY_ID": 2, 
 
     "description":"Andorran" 
 
    }, 
 
    { 
 
     "NATIONALITY_ID": 3, 
 
     "description":"Botswanan" 
 
    }, 
 
    { 
 
     "NATIONALITY_ID": 4, 
 
     "description":"Brazilian" 
 
    }, 
 
    { 
 
     "NATIONALITY_ID": 5, 
 
     "description":"Canadian" 
 
    }, 
 
    { 
 
     "NATIONALITY_ID": 6, 
 
     "description":"Cypriot" 
 
    } 
 
    ]; 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angucomplete-alt/2.4.1/angucomplete-alt.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <angucomplete-alt id="ex1" 
 
    placeholder="Select Nationality" 
 
    selected-object="selectedObj" 
 
    local-data="nationalities" 
 
    search-fields="description" 
 
    title-field="description" 
 
    minlength="1" 
 
    inputclass="form-control form-control-small" 
 
    match-class="highlight" /> 
 
</body> 
 

 
</html>

Ich hoffe, es hilft.

Sie können weitere Beispiele here überprüfen.

Quelle

2016-07-05 15:04:13 developer033

Antwort

Verwandte Themen