Bahan Sudut - Pelengkapan Otomatis
Itu md-autocomplete, Angular Directive, digunakan sebagai kontrol masukan khusus dengan dropdown bawaan untuk menampilkan semua kemungkinan kecocokan dengan kueri kustom. Kontrol ini bertindak sebagai kotak saran waktu nyata segera setelah pengguna mengetik di area masukan.<md-autocomplete>dapat digunakan untuk memberikan hasil pencarian dari sumber data lokal atau jarak jauh. md-autocomplete menyimpan hasil cache saat menjalankan kueri. Setelah panggilan pertama, ini menggunakan hasil yang di-cache untuk menghilangkan permintaan server yang tidak perlu atau logika pencarian dan itu dapat dinonaktifkan.
Atribut
Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-autocomplete.
| Sr Tidak | Parameter & Deskripsi |
|---|---|
| 1 | * md-items Ekspresi dalam format item dalam item untuk mengulangi kecocokan untuk pencarian Anda. |
| 2 | md-selected-item-change Ekspresi yang akan dijalankan setiap kali item baru dipilih. |
| 3 | md-search-text-change Ekspresi yang akan dijalankan setiap kali teks pencarian diperbarui. |
| 4 | md-search-text Model untuk mengikat teks kueri penelusuran. |
| 5 | md-selected-item Model untuk mengikat item yang dipilih. |
| 6 | md-item-text Ekspresi yang akan mengubah objek Anda menjadi satu string. |
| 7 | placeholder Teks placeholder yang akan diteruskan ke masukan. |
| 8 | md-no-cache Menonaktifkan cache internal yang terjadi di pelengkapan otomatis. |
| 9 | ng-disabled Menentukan apakah akan menonaktifkan kolom input atau tidak. |
| 10 | md-min-length Menentukan panjang teks minimum sebelum pelengkapan otomatis memberikan saran. |
| 11 | md-delay Menentukan jumlah waktu (dalam milidetik) untuk menunggu sebelum mencari hasil. |
| 12 | md-autofocus Jika benar, akan segera memfokuskan elemen masukan. |
| 13 | md-autoselect Jika benar, item pertama akan dipilih secara default. |
| 14 | md-menu-class Ini akan diterapkan ke menu tarik-turun untuk gaya. |
| 15 | md-floating-label Ini akan menambahkan label mengambang ke pelengkapan otomatis dan membungkusnya dalam md-input-container. |
| 16 | md-input-name Atribut nama yang diberikan ke elemen masukan untuk digunakan dengan FormController. |
| 17 | md-input-id ID yang akan ditambahkan ke elemen masukan. |
| 18 | md-input-minlength Panjang minimum nilai input untuk validasi. |
| 19 | md-input-maxlength Panjang maksimum nilai input untuk validasi. |
| 20 | md-select-on-match Jika disetel sebagai benar, pelengkapan otomatis akan secara otomatis memilih item yang tepat jika teks pencarian sama persis. |
Contoh
Contoh berikut menunjukkan penggunaan file md-autocomplete direktif dan juga penggunaan pelengkapan otomatis.
am_autocomplete.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('autoCompleteController', autoCompleteController);
function autoCompleteController ($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
// list of states to be displayed
self.states = loadStates();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.newState = newState;
function newState(state) {
alert("This functionality is yet to be implemented!");
}
function querySearch (query) {
var results = query ? self.states.filter( createFilterFor(query) ) :
self.states, deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () {
deferred.resolve( results );
},
Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function searchTextChange(text) {
$log.info('Text changed to ' + text);
}
function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item));
}
//build list of states as map of key-value pairs
function loadStates() {
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';
return allStates.split(/, +/g).map( function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
}
//filter function for search query
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
}
</script>
</head>
<body ng-app = "firstApplication" ng-cloak>
<div ng-controller = "autoCompleteController as ctrl" layout = "column" ng-cloak>
<md-content class = "md-padding">
<form ng-submit = "$event.preventDefault()">
<p><code>md-autocomplete</code> can be used to provide search results from
local or remote data sources.</p>
<md-autocomplete
ng-disabled = "ctrl.isDisabled"
md-no-cache = "ctrl.noCache"
md-selected-item = "ctrl.selectedItem"
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 = "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.
<a ng-click = "ctrl.newState(ctrl.searchText)">Create a new one!</a>
</md-not-found>
</md-autocomplete>
<br/>
<md-checkbox ng-model = "ctrl.simulateQuery">Show progress for results?
</md-checkbox>
<md-checkbox ng-model = "ctrl.noCache">Disable caching?</md-checkbox>
<md-checkbox ng-model = "ctrl.isDisabled">Disable?</md-checkbox>
<p><code>md-autocomplete</code> caches results when performing a query.
After first call, it uses the cached results to eliminate unnecessary
server requests or lookup logic and it can be disabled.</p>
</form>
</md-content>
</div>
</body>
</html>Hasil
Verifikasi hasilnya.