Membuat widget Typeahead dengan Angularjs - SitePoint

3Jika anda memulakan projek AngularJS, anda mungkin mahu mempunyai semua komponen yang ditulis dalam sudut. Walaupun sudah tentu mungkin untuk menggunakan semula plugin jQuery yang sedia ada, membuang sekumpulan jQuery di dalam arahan tidak selalu cara yang betul untuk melakukan sesuatu. Nasihat saya adalah untuk memeriksa terlebih dahulu jika perkara yang sama boleh dilaksanakan dengan sudut tulen dengan cara yang lebih mudah/lebih baik. Ini menjadikan kod aplikasi anda bersih dan boleh dipelihara. Tutorial ini, yang disasarkan kepada pemula, berjalan pembaca melalui penciptaan widget Typeahead yang mudah dengan AngularJs.

Takeaways Key

• Pembaca panduan tutorial melalui membuat widget Typeahead dengan AngularJS, yang memberikan cadangan sebagai jenis pengguna ke dalam kotak teks. Widget ini direka untuk menjadi sangat dikonfigurasikan dan mudah diintegrasikan ke dalam sistem yang sedia ada.
• Proses ini melibatkan membina sebuah kilang yang berinteraksi dengan API yang tenang dan mengembalikan data JSON untuk cadangan auto-lengkap, mewujudkan arahan untuk merangkum medan input Typeahead, dan membuat templat untuk arahan. Arahan ini disimpan dikonfigurasikan untuk pengguna akhir untuk menyesuaikan pilihan seperti sifat objek JSON untuk ditunjukkan sebagai sebahagian daripada cadangan dan model dalam skop pengawal yang akan memegang item yang dipilih.
Tutorial juga menerangkan cara mengemas kini fungsi pautan arahan dan mengkonfigurasi Arahan untuk digunakan. Produk akhir adalah widget Typeahead AngularJS dengan pilihan konfigurasi, yang boleh disesuaikan dengan lebih lanjut menggunakan CSS. Kod sumber lengkap tersedia untuk dimuat turun di GitHub.

Gambaran Keseluruhan

Dalam tutorial ini kita akan membina widget Typeahead yang mudah yang mencipta cadangan sebaik sahaja seseorang mula menaip ke dalam kotak teks. Kami akan arkitek aplikasinya sedemikian rupa sehingga produk akhir akan sangat dikonfigurasikan dan boleh dipasang ke dalam sistem yang sedia ada dengan mudah. Langkah -langkah asas yang terlibat dalam proses penciptaan adalah:

Buat kilang yang berinteraksi dengan API yang tenang, dan mengembalikan JSON yang akan digunakan untuk cadangan lengkap auto.
Buat arahan yang akan menggunakan data JSON dan merangkum medan input Typeahead.
Pastikan arahan dikonfigurasi supaya pengguna akhir dapat mengkonfigurasi pilihan berikut.

Pilihan Konfigurasi

sifat objek JSON yang tepat untuk dipaparkan sebagai sebahagian daripada cadangan.
Model dalam skop pengawal yang akan memegang item yang dipilih.
Fungsi dalam skop pengawal yang dilaksanakan apabila item dipilih.
teks pemegang tempat (prompt) untuk medan input Typeahead.

Langkah 1: Membina kilang untuk mendapatkan data

Sebagai langkah pertama, mari kita buat kilang yang menggunakan perkhidmatan HTTP Angular untuk berinteraksi dengan API yang tenang. Lihat coretan berikut:

<span>var typeAhead = angular.module('app', []);
</span>
typeAhead<span>.factory('dataFactory', function($http) {
</span>  <span>return {
</span>    <span>get: function(url) {
</span>      <span>return $http.get(url).then(function(resp) {
</span>        <span>return resp.data; // success callback returns this
</span>      <span>});
</span>    <span>}
</span>  <span>};
</span><span>});</span>

Kod sebelumnya mewujudkan kilang yang dipanggil DataFactory yang mengambil data JSON dari API. Kami tidak akan masuk ke butiran kilang, tetapi kami perlu memahami secara ringkas bagaimana perkhidmatan $ HTTP berfungsi. Anda lulus URL ke fungsi get (), yang mengembalikan janji. Satu lagi panggilan untuk kemudian () pada janji ini juga mengembalikan janji lain (kami mengembalikan janji ini dari fungsi kilang () kilang). Janji ini diselesaikan dengan nilai pulangan dari panggilan balik kejayaan yang diluluskan pada masa itu (). Jadi, di dalam pengawal kami, kami tidak secara langsung berinteraksi dengan $ HTTP. Sebaliknya, kami meminta contoh kilang di pengawal dan memanggil fungsi GET () dengan URL. Oleh itu, kod pengawal kami yang berinteraksi dengan kilang kelihatan seperti ini:

typeAhead<span>.controller('TypeAheadController', function($scope<span>, dataFactory</span>) { // DI in action
</span>  dataFactory<span>.get('states.json').then(function(data) {
</span>    $scope<span>.items = data;
</span>  <span>});
</span>  $scope<span>.name = ''; // This will hold the selected item
</span>  $scope<span>.onItemSelected = function() { // this gets executed when an item is selected
</span>    <span>console.log('selected=' + $scope.name);
</span>  <span>};
</span><span>});</span>

Kod sebelumnya menggunakan titik akhir API yang dipanggil States.json yang mengembalikan senarai JSON dari Amerika Syarikat. Apabila data tersedia, kami menyimpan senarai dalam item model skop. Kami juga menggunakan nama model untuk memegang item yang dipilih. Akhirnya, fungsi onItemSelected () akan dilaksanakan apabila pengguna memilih keadaan tertentu.

Langkah 2: Mewujudkan Arahan

Mari kita mulakan dengan Arahan Typeahead, ditunjukkan di bawah.

typeAhead<span>.directive('typeahead', function($timeout) {
</span>  <span>return {
</span>    <span>restrict: 'AEC',
</span>    <span>scope: {
</span>      <span>items: '=',
</span>      <span>prompt: '@',
</span>      <span>title: '@',
</span>      <span>subtitle: '@',
</span>      <span>model: '=',
</span>      <span>onSelect: '&amp;'
</span>    <span>},
</span>    <span>link: function(scope<span>, elem, attrs</span>) {
</span>    <span>},
</span>    <span>templateUrl: 'templates/templateurl.html'
</span>  <span>};
</span><span>});</span>

Dalam Arahan kita mencipta skop terpencil yang mentakrifkan beberapa sifat:

• item: Digunakan untuk lulus senarai JSON ke skop terpencil.
• prompt: Satu cara mengikat untuk lulus teks pemegang tempat untuk medan input Typeahead.
• Tajuk dan sari kata: Setiap entri medan Lengkap Auto mempunyai tajuk dan sarikata. Kebanyakan widget Typeahead berfungsi dengan cara ini. Mereka biasanya (jika tidak selalu) mempunyai dua bidang untuk setiap entri dalam cadangan drop down. Sekiranya objek JSON mempunyai sifat tambahan, ini bertindak sebagai cara meluluskan dua sifat yang akan dipaparkan dalam setiap cadangan dalam lungsur turun. Dalam kes kami, tajuk sepadan dengan nama Negeri, manakala Subtitle mewakili singkatannya.
• Model: Dua cara mengikat untuk menyimpan pilihan.
• onSelect: kaedah mengikat, digunakan untuk melaksanakan fungsi dalam skop pengawal sebaik sahaja pemilihan berakhir.

Nota: Contoh respons JSON ditunjukkan di bawah:

<span>var typeAhead = angular.module('app', []);
</span>
typeAhead<span>.factory('dataFactory', function($http) {
</span>  <span>return {
</span>    <span>get: function(url) {
</span>      <span>return $http.get(url).then(function(resp) {
</span>        <span>return resp.data; // success callback returns this
</span>      <span>});
</span>    <span>}
</span>  <span>};
</span><span>});</span>

Langkah 3: Buat templat

Sekarang, mari buat templat yang akan digunakan oleh Arahan.

typeAhead<span>.controller('TypeAheadController', function($scope<span>, dataFactory</span>) { // DI in action
</span>  dataFactory<span>.get('states.json').then(function(data) {
</span>    $scope<span>.items = data;
</span>  <span>});
</span>  $scope<span>.name = ''; // This will hold the selected item
</span>  $scope<span>.onItemSelected = function() { // this gets executed when an item is selected
</span>    <span>console.log('selected=' + $scope.name);
</span>  <span>};
</span><span>});</span>

Pertama, kami membuat medan teks input di mana pengguna akan menaip. Prompt harta skop ditugaskan ke atribut placeholder. Seterusnya, kami gelung melalui senarai negeri dan memaparkan nama dan sifat singkatan. Nama -nama harta ini dikonfigurasikan melalui tajuk dan sifat skop subtitle. Arahan NG-MouseEnter dan NG-Class digunakan untuk menyerlahkan entri apabila pengguna berayun dengan tetikus. Seterusnya, kami menggunakan penapis: model, yang menapis senarai oleh teks yang dimasukkan ke dalam medan input. Akhirnya, kami menggunakan arahan NG-Hide untuk menyembunyikan senarai apabila sama ada medan teks input kosong atau pengguna telah memilih item. Harta yang dipilih ditetapkan untuk benar di dalam fungsi Handleselection (), dan ditetapkan kepada False False (untuk menunjukkan senarai cadangan) apabila seseorang mula menaip ke medan input.

Langkah 4: Kemas kini fungsi pautan

Seterusnya, mari kita mengemas kini fungsi pautan arahan kami seperti yang ditunjukkan di bawah.

typeAhead<span>.directive('typeahead', function($timeout) {
</span>  <span>return {
</span>    <span>restrict: 'AEC',
</span>    <span>scope: {
</span>      <span>items: '=',
</span>      <span>prompt: '@',
</span>      <span>title: '@',
</span>      <span>subtitle: '@',
</span>      <span>model: '=',
</span>      <span>onSelect: '&amp;'
</span>    <span>},
</span>    <span>link: function(scope<span>, elem, attrs</span>) {
</span>    <span>},
</span>    <span>templateUrl: 'templates/templateurl.html'
</span>  <span>};
</span><span>});</span>

Fungsi HandlesElection () mengemas kini harta skop, model, dengan nama negeri yang dipilih. Kemudian, kami menetapkan semula sifat semasa dan terpilih. Seterusnya, kami memanggil fungsi OnSelect (). Kelewatan ditambah kerana skop tugasan.Model = SelectedItem tidak mengemas kini harta skop pengawal terikat dengan segera. Adalah wajar untuk melaksanakan fungsi panggil balik skop pengawal selepas model telah dikemas kini dengan item yang dipilih. Itulah sebabnya kami telah menggunakan perkhidmatan $ tamat $. Selain itu, fungsi -fungsi iscurrent () dan setCurrent () digunakan bersama dalam templat untuk menyerlahkan entri dalam cadangan lengkap auto. CSS berikut juga digunakan untuk menyelesaikan proses sorotan.

<span>{
</span>  <span>"name": "Alabama",
</span>  <span>"abbreviation": "AL"
</span><span>}</span>

Langkah 5: Konfigurasikan dan gunakan Arahan

Akhirnya, mari kita memohon arahan dalam HTML, seperti yang ditunjukkan di bawah.

<span><span><span><input</span> type<span>="text"</span> ng-model<span>="model"</span> placeholder<span>="{{prompt}}"</span> ng-keydown<span>="selected=false"</span> /></span>
</span><span><span><span><br</span>/></span>
</span>
<span><span><span><div</span> class<span>="items"</span> ng-hide<span>="!model.length || selected"</span>></span>
</span>  <span><span><span><div</span> class<span>="item"</span> ng-repeat<span>="item in items | filter:model  track by $index"</span> ng-click<span>="handleSelection(item[title])"</span> <span>style<span>="<span>cursor:pointer</span>"</span></span> ng-class<span>="{active:isCurrent($index)}"</span> ng-mouseenter<span>="setCurrent($index)"</span>></span>
</span>    <span><span><span><p</span> class<span>="title"</span>></span>{{item[title]}}<span><span></p</span>></span>
</span>    <span><span><span><p</span> class<span>="subtitle"</span>></span>{{item[subtitle]}}<span><span></p</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Kesimpulan

Tutorial ini telah menunjukkan kepada anda bagaimana untuk membuat widget Typeahead AngularJS dengan pilihan konfigurasi. Kod sumber lengkap tersedia untuk dimuat turun di GitHub. Jangan ragu untuk memberi komen jika ada sesuatu yang tidak jelas atau anda ingin memperbaiki apa -apa. Juga, jangan lupa untuk menyemak demo langsung.

soalan yang sering ditanya mengenai membuat widget typeahead dengan angularjs

Bagaimana saya boleh menyesuaikan penampilan dropdown typeahead?

Menyesuaikan penampilan dropdown typeahead dapat dicapai dengan menggunakan CSS. Anda boleh menargetkan menu dropdown dengan menggunakan kelas .dropdown-menu. Sebagai contoh, jika anda ingin menukar warna latar belakang dan warna fon, anda boleh menggunakan kod CSS berikut:
. 343A40; }
ingat untuk memasukkan CSS ini dalam fail CSS utama anda atau dalam tag dalam fail HTML anda.

Bagaimanakah saya dapat mengehadkan bilangan cadangan dalam dropdown typeahead? Atribut ini menentukan bilangan minimum aksara yang mesti dimasukkan sebelum Typeahead mula menendang. Sebagai contoh, jika anda ingin mula menunjukkan cadangan selepas pengguna menaip 3 aksara, anda boleh menggunakan kod berikut:

Bagaimana saya boleh menggunakan fungsi pemilihan objek dengan Typeahead?

Dengan Typeahead, anda boleh menggunakan atribut Typeahead-on-Select. Atribut ini membolehkan anda menentukan fungsi yang dipanggil apabila perlawanan dipilih. Fungsi ini akan diluluskan item yang dipilih. Contohnya:

Dalam pengawal anda, anda boleh menentukan fungsi onSelect seperti ini :
$ scope.onselect = function (item, model, label) { // Lakukan sesuatu dengan item yang dipilih
}; Bolehkah saya menggunakan Typeahead dengan Bootstrap dalam AngularJS? Modul ini menyediakan satu set arahan AngularJS berdasarkan markup dan CSS Bootstrap. Arahan Typeahead boleh digunakan seperti berikut:

Dalam contoh ini, menyatakan Array of States, $ ViewValue adalah nilai yang dimasukkan oleh pengguna, dan Limitto: 8 mengehadkan bilangan cadangan kepada 8.

Bagaimana saya boleh menggunakan Typeahead dengan data jauh dalam Angularjs?

Untuk menggunakan Typeahead dengan data jauh di AngularJS, anda boleh menggunakan perkhidmatan HTTP $ untuk mengambil data dari pelayan jauh. Atribut Typeahead boleh digunakan untuk mengikat medan input ke data yang diambil. Contohnya:

$ scope.getStates = function (val) { return $ http.get ('/api/states', { params: { name: val

}
}). Kemudian (fungsi (response) {
response response.data.map (fungsi (item) {
kembali item.name;

}); Dalam contoh ini, GetStates adalah fungsi yang mengambil negara dari pelayan jauh berdasarkan nilai yang dimasukkan oleh Pengguna.

Atas ialah kandungan terperinci Membuat widget Typeahead dengan Angularjs - SitePoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!