Chosen: Ambil Dari Sumber Data Jarak Jauh

Dibuat pada 27 Jul 2011  ·  47Komentar  ·  Sumber: harvesthq/chosen

Apakah ada beberapa contoh kode yang menunjukkan cara kerjanya dengan fitur jQuery UI Autocomplete? Jika tidak, dapatkah kami memiliki ini sebagai permintaan fitur?

Feature Request

Komentar yang paling membantu

@juanghurtado : jika saya memiliki kotak multi-pilih yang berisi 300 ribu item, saya tidak dapat benar-benar menuliskannya ke dalam html sepenuhnya. Terpilih menyediakan antarmuka yang sempurna untuk mencari dan memilih. masih banyak library lain yang menyediakan fungsionalitas ini, yaitu [1], [2] dan masih banyak lagi. Dari semua yang Dipilih ini berfungsi yang terbaik, tetapi tidak mendukung koleksi yang sangat besar - itulah yang akan ditambahkan oleh dukungan sumber data jarak jauh. Juga, jika Terpilih mendukung ini, itu berarti harus menguliti dan tetap memperbarui satu plugin, bukan dua.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Semua 47 komentar

Ini sedikit lebih baik daripada jquery auto complete bukan? Saya ingin melihat sumber data jarak jauh pada akhirnya (kemampuan untuk memberikan panggilan balik untuk hasil pencarian)

Saya ketiga permintaan ini. Ini akan sangat berguna untuk memiliki kemampuan untuk menentukan sumber jarak jauh seperti fitur pelengkapan otomatis UI jQuery.

Atau mungkin lebih baik: Sertakan yang dipilih di UI jQuery. :)

+1

lebih khusus +1 saya adalah untuk gagasan menggunakan sumber data jarak jauh dengan entri teks bebas (misalnya menggunakan panggilan ajax untuk membantu penandaan)

Maaf, saya tidak cukup jelas, tetapi integrasi "sumber data jarak jauh" adalah yang saya maksud semula, terima kasih telah menunjukkannya. Tentu saja plugin ini jauh lebih baik daripada fitur jQuery Auto Complete. Seperti yang dikomentari daFish, saya ingin melihat ini sebagai bagian dari jQuery UI itu sendiri.

+1 untuk dukungan sumber data jarak jauh

Saya tidak mengerti. Dipilih adalah tentang kegunaan dan keindahan yang lebih baik pada elemen SELECT , bukan tentang pelengkapan otomatis atau pengambilan data jarak jauh. Jika Anda menginginkan data jarak jauh, kumpulkan dan masukkan ke dalam DOM sebelum panggilan Terpilih…

@juanghurtado : jika saya memiliki kotak multi-pilih yang berisi 300 ribu item, saya tidak dapat benar-benar menuliskannya ke dalam html sepenuhnya. Terpilih menyediakan antarmuka yang sempurna untuk mencari dan memilih. masih banyak library lain yang menyediakan fungsionalitas ini, yaitu [1], [2] dan masih banyak lagi. Dari semua yang Dipilih ini berfungsi yang terbaik, tetapi tidak mendukung koleksi yang sangat besar - itulah yang akan ditambahkan oleh dukungan sumber data jarak jauh. Juga, jika Terpilih mendukung ini, itu berarti harus menguliti dan tetap memperbarui satu plugin, bukan dua.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Nah, jika Anda memiliki 300k item pada item SELECT Anda, (IMHO) Anda melakukan sesuatu yang salah… Ada banyak opsi untuk menangani antarmuka itu dengan cara yang lebih baik.

Dipilih dapat melakukan banyak hal… Seperti pisau tentara desir, ia dapat melakukan banyak hal (sumber data jarak jauh, asosiasi gambar ke item, pemfilteran khusus, kueri AJAX…) dan berhenti menjadi alat yang sempurna hanya untuk satu (antarmuka yang lebih baik untuk SELECT tradisional elemen

El 10/08/2011, terakhir 22:56, ivaynberg menulis:

@juanghurtado : jika saya memiliki kotak multi-pilih yang berisi 300 ribu item, saya tidak dapat benar-benar menuliskannya ke dalam html sepenuhnya. Terpilih menyediakan antarmuka yang sempurna untuk mencari dan memilih. masih banyak library lain yang menyediakan fungsionalitas ini, yaitu [1], [2] dan masih banyak lagi. Dari semua yang Dipilih ini berfungsi yang terbaik, tetapi tidak mendukung koleksi yang sangat besar - itulah yang akan ditambahkan oleh dukungan sumber data jarak jauh. Juga, jika Terpilih mendukung ini, itu berarti harus menguliti dan tetap memperbarui satu plugin, bukan dua.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Balas email ini secara langsung atau lihat di GitHub:
https://github.com/harvethq/chosen/issues/79#issuecomment -1776643

benar-benar tidak bisa berdebat dengan itu ...

Saya ingin mendapatkan data jarak jauh saat mencari dari yang dipilih, seperti plugin pelengkapan otomatis jquery, tolong bantu saya

+1 untuk memiliki dukungan untuk data jarak jauh.

Anda melihat UI Anda bagus, tetapi ada beberapa masalah, seperti tidak mendukung data jarak jauh.

Saya pikir ini bisa dilakukan tetapi tidak semudah yang dibayangkan. Karena ini adalah github dan open source, mari kita lihat beberapa kode.

@juanghurtado Saya juga berpikir kita bisa melakukan ini tanpa menggembungkan fungsionalitas yang ada, baik jquery dan prototipe memberi kita semua yang kita butuhkan untuk sumber data jarak jauh.

result_search() tampaknya dipicu selama penekanan tombol - di situlah saya akan mengganti perilaku default yang dipilih. Saya perlu menggali sedikit lebih dalam tetapi sepertinya jika kita dapat meniru winnow_results() dan menambahkan cara untuk menunjukkan perilaku pemuatan (mis. winnow_loading_results()) ini bisa berfungsi dengan baik.

Fungsi lain untuk dilihat adalah winnow_results_clear();

Bagian yang sulit adalah mencari cara untuk mengintegrasikan ini dengan lancar ke Terpilih. Harus di pilihan? Haruskah itu hanya subkelas? Dan apakah ini sesuatu yang akan dibiarkan oleh para pengembang inti ke dalam proyek induk?

Sebenarnya - kita harus menutup masalah ini, banyak pekerjaan yang sedang dilakukan pada #162 yang tampaknya menjadi semua yang kita inginkan.

Hanya berpikir saya akan menambahkan bahwa di zaman sekarang ini fungsi ini adalah suatu keharusan dan saya sangat berharap itu segera diimplementasikan. Dalam setiap cara lain yang dipilih adalah sempurna. :)

Apa yang terjadi dengan masalah pengambilan dari sumber data jarak jauh?

Saatnya @pfiller bergabung dalam percakapan, kurasa.

+1 Saya akan senang melihat ini

Saya memuat nilai jarak jauh sekaligus ketika halaman disajikan, jadi jika saya tidak dapat memperbarui atau mengambil data baru, jika saya setidaknya dapat menambahkan opsi baru ke pilih maka saya dapat mempertahankan sisi klien hingga halaman di-refresh. Jadi +1 untuk pengambilan jarak jauh dan/atau kemampuan +1 untuk menambahkan opsi baru. Semoga ini masuk akal...

+1 untuk permintaan jaloka

Saya memiliki tabel dengan 17.500 catatan dan ketika saya memuat halaman menjadi lambat dan akhirnya crash... Saya pikir jika cara untuk mencari kecocokan dalam tabel dapat diterapkan, itu akan menjadi yang terbaik.

Seseorang telah menerapkannya: https://github.com/meltingice/ajax-chosen

Saya bukan guru jQuery dan sebenarnya saya tidak tahu apa-apa tentang itu. Jadi tolong maafkan cara saya yang tidak tahu apa-apa untuk menjelaskan sesuatu. Saya benar-benar tidak dapat menemukan kata yang tepat untuk menggambarkan masalah saya. Saya baru saja mengikuti instruksi sederhana itu: menambahkan kelas, meletakkan skrip dan memanggil fungsinya. Semuanya bekerja dengan baik, kecuali halaman yang tidak memiliki input pilih di dalamnya. Dan saya tidak yakin bahwa data berjalan dengan bantuan Ajax. Yang bisa saya duga adalah bahwa formulir dihasilkan dari tabel database MySQL. Pilih opsi input dari sana. Setidaknya itu tampak seperti ketika saya mengedit halaman. Jadi ketika saya memuat halaman, saya hanya melihat kelas 'chzn-select' di input pilih saya yang berarti skrip tidak berfungsi sama sekali. Membaca masalah terkait, saya mengerti bahwa itu karena sumber data jarak jauh, tetapi saya tidak mengerti bagaimana cara memperbaikinya. Sebenarnya saya tidak begitu mengerti apa yang kalian bicarakan di sini. Saya mencoba pilihan Ajax yang disediakan di atas tanpa hasil dan saya mencoba 'peretasan' lain yang disebutkan di sini. Bisakah seseorang menjelaskan dengan kata-kata sederhana apakah mungkin melakukan sesuatu dalam kasus saya atau tidak?

Saya menggunakan jQuery 1.4.2, mencoba keduanya di Mac OS dan Windows. Anda dapat memeriksanya di sini: http://94.125.8.168/eng/ (klik tab Cari atau Jadwal di blok tengah yang disebut Informasi penerbangan). Pilih Tujuan, Nomor penerbangan dan Bandara yang seharusnya Terpilih.

@ffiona Anda perlu membungkus panggilan Terpilih Anda dalam fungsi siap jQuery .

$(document).ready(function() {
  $(".chzn-select").chosen();
});

Silakan coba untuk menjaga pertanyaan masa depan pada topik untuk sebuah utas. Jika Anda memiliki pertanyaan, Anda dipersilakan untuk membuka edisi baru.

@pfiller apakah ini fitur yang sedang/atau akan kalian kerjakan? saya sudah mencoba semua peretasan yang dipilih ajax tetapi tidak ada yang benar-benar berfungsi. saya sangat membutuhkan ini karena saya sedang mengerjakan aplikasi bursa saham yang diketik pengguna dalam simbol saham yang seperti yang Anda tahu dapat memiliki puluhan ribu.

@semua sepertinya pilihan saya untuk mendapatkan ajax auto complete dari yang dipilih akan menjadi pilihan yang lama dan saya mungkin harus mencari alternatif. adakah yang bisa merekomendasikan alternatif lain untuk dipilih dengan fitur ini?

Saya juga membuatnya baru-baru ini .. https://github.com/ksykulev/chosen-ajax-addition

@ksykulev apakah Anda memiliki demo langsung ini di suatu tempat?

@jaequery
Hanya dengan cepat meretas bersama contoh http://sykulev.com/ajaxchosen/index.html

Saya menambahkan kode di bawah /example di repositori saya.

@ksykulev : versi Anda melakukan pekerjaan yang sangat bagus dengan satu pilihan, terima kasih! Btw itu tidak bekerja dengan multiselect. Saya mungkin melihat ini jika saya punya waktu luang.

Versi @meltingice melakukan hal-hal yang sangat aneh pada multiselect juga, saya pikir itu karena tidak menggunakan fungsi Terpilih sama sekali (jadi semua hal yang diselesaikan secara alami di lib asli tidak dalam versi ajax, misalnya input reposisi dan mengubah ukuran setelah hasilnya dikirim kembali ke klien).

@jbbarth : Ya Anda benar, saya belum mengujinya dengan multiselects jadi saya hanya bisa membayangkan itu tidak berfungsi dengan baik. Dalam hal kelengkapan perpustakaan saya, saya pasti dapat menambahkan dukungan untuk ini. Aku akan mendapatkannya. Terima kasih!

saya akhirnya menggulirkan versi saya sendiri dengan tampilan dan nuansa berdasarkan Terpilih.

https://github.com/ivaynberg/select2

ini mendukung kumpulan data jarak jauh ajax/jsonp dan pengguliran tak terbatas (pemuatan lambat kumpulan data jarak jauh halaman). belum ada dukungan untuk multiselect.

@ivaynberg Saya semua memperhatikan ini.

Setelah Anda menekan parodi fitur dengan Terpilih (khususnya dukungan multipilih seperti tag), Anda pasti harus menabrak utas ini.

Saya suka tampilan dan nuansa Terpilih, tetapi itu benar-benar meninggalkan hal-hal yang diinginkan dalam implementasi.

Pekerjaan yang sangat, sangat bagus!

@ivaynberg Saya perhatikan Anda masih memiliki kode dari yang dipilih yang secara khusus menghitung drop-down dan mencari lebar input.

Anda mungkin ingin memeriksa ini: https://github.com/harvethq/chosen/pull/407

Saya baru-baru ini memperbarui versi pilihan ajax saya untuk mendukung banyak pilihan. http://sykulev.com/ajaxchosen/index.html

@justindujardin Select2 master sekarang memiliki fitur paritas. saya akan melihat hal-hal ukuran di 407, tetapi kita harus berdiskusi lebih lanjut untuk proyek Select2.

Saya sangat menyukai Select2 dan saya merekomendasikan SEMUA ORANG beralih ke sana. Heh.

@ProLoser – terima kasih untuk itu... persis seperti yang saya cari. Sepertinya pilihan yang jauh lebih baik.

Pilih2 FTW!

Select2 adalah cara untuk pergi!

Adakah pembaruan setelah bertahun-tahun?

Mengapa fitur imp seperti itu hilang?

hm.. bau. Saya memutuskan untuk menerapkan Terpilih karena penyorotan teks tetapi tidak menyadari AJAX akan sangat sulit untuk ditambahkan. Saya kira saya harus pergi dengan select2 jika semua orang melompat dari ini untuk pergi ke sana sebagai cara untuk memenuhi persyaratan. :(

Ini adalah fitur yang bagus. Banyak garpu mengusulkan fitur ini tetapi implementasinya sering kacau. :+1:

Saya telah menemukan solusi patch monyet yang mudah:

AbstractChosen.prototype.winnow_results = (function(winnow_results) {
  return function() {
    if (this.options.source) {
      return this.options.source.call(this.form_field, this.search_field.val(), (function(_this) {
        return function(results) {
          var id, option, select;
          if (results) {
            select = document.createElement('select');
            select.appendChild(document.createElement('option'));
            for (id in results) {
              if (results.hasOwnProperty(id)) {
                option = document.createElement('option');
                option.value = id;
                option.textContent = results[id];
                select.appendChild(option);
              }
            }
            _this.results_data = SelectParser.select_to_array(select);
          }
          return winnow_results.call(_this);
        };
      })(this));
    } else {
      return winnow_results.call(this);
    }
  };
})(AbstractChosen.prototype.winnow_results);

Anda dapat memberikan opsi fungsi 'sumber' untuk dipilih yang akan dipanggil pada render hasil. Ini akan memiliki nilai input string dan argumen fungsi panggilan balik. Fungsi panggilan balik memberikan saran. Jika hasilnya seharusnya tidak berubah, maka Anda harus segera memanggilnya tanpa argumen, jika tidak, Anda dapat meminta hasil dan mengirimkannya ke panggilan balik saat Anda mendapatkannya. Objek hasil memiliki format ini: { value: "label", value2: "label2" } . Berikut ini contohnya:

var select = $("#select"),
    value;
select.chosen({
    source: function (val, callback) {
        if (value != val) {
            value = val;
            $.get('/suggestions', { value: value }, callback);
        } else
            callback();
    }
});

Apa yang disarankan @faucct tampaknya berhasil. Catatan kecil adalah bahwa jika Anda menggunakan versi jquery Anda tidak akan dapat mengakses AbstractChosen, di luar lingkup yang dipilih, jadi Anda mungkin ingin menambahkan file-file itu ke dalam lingkup yang dipilih atau Anda perlu memodifikasi file js yang dipilih dan pindahkan AbstractChosen dan SelectParser ke lingkup global. Masalah lain adalah, itu memperbarui daftar terbuka (div yang dipilih dibuat) tetapi tidak memperbarui "bidang pilih" yang sebenarnya oleh karena itu opsi yang Anda pilih jika tidak ada di pilih mungkin menimbulkan kesalahan. Hal yang perlu diperhatikan juga adalah, string yang Anda tulis digunakan untuk menyaring hasil yang Anda kembalikan juga. Juga berfungsi setiap kali Anda mengetik sesuatu sehingga Anda memiliki kontrol secara manual untuk tidak melakukan panggilan.

Saya telah menemukan ekstensi lain adalah ini: https://github.com/meltingice/ajax-chosen

Ini bekerja cukup baik tetapi versi saat ini rusak, Anda telah membuat beberapa modifikasi kecil. Anda harus mengganti "chzn" dengan "terpilih" karena perpustakaan yang dipilih telah mengubah nama css internalnya. Perubahan terakhir yang perlu Anda lakukan adalah memicu " terpilih: diperbarui " alih-alih " listz: diperbarui ". Di readme itu meminta Anda untuk memperbaiki bug di css tetapi sudah diperbaiki di versi yang lebih baru, jadi Anda tidak perlu melakukan itu. Anda juga dapat mengatur beberapa opsi yang berguna dan jika pengguna terus menulis, sistem juga membatalkan panggilan yang tertunda.

Ini adalah perjalanan saya :), semoga membantu.

Saya telah memecahkan masalah ini dengan membuat plugin yang menangani sumber data jarak jauh untuk dipilih, semoga Anda semua dapat menikmatinya

dipilih-sumber jarak jauh (https://github.com/westonganger/chosen-remote-source)

Seluruh kode cukup sederhana dengan kurang dari 200 baris kode
https://github.com/westonganger/chosen-remote-source/blob/master/src/chosen-remote-source.js

Satu-satunya bagian Terpilih yang perlu ditambal adalah sebagai berikut:

// MONKEY PATCH CHOSEN TO NOT CLEAR THE SELECTED RESULTS UPON SEARCHING WITH
chosen_prototype.show_search_field_default = function() {
  if (this.is_multiple && this.choices_count() < 1 && !this.active_field) {
    this.search_field.val(this.default_text);
    return this.search_field.addClass("default");
  } else {
    if(this.default_text === this.search_field.val()){
      this.search_field.val(""); // ORIGINAL LINE, SURROUNDING IF STATEMENT IS CUSTOM
    }

    return this.search_field.removeClass("default");
  }
};
// END CHOSEN PATCH
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

jbrooksuk picture jbrooksuk  ·  6Komentar

Scalamoosh picture Scalamoosh  ·  8Komentar

jim-at-miramontes picture jim-at-miramontes  ·  4Komentar

vpode picture vpode  ·  5Komentar

eduardokranz picture eduardokranz  ·  6Komentar