JQuery Ajax Html5 DataList Autocomplete Contoh

Kod ini menggunakan tag Datalist HTML5 untuk menyediakan pilihan autocomplete untuk medan teks . Ia merebut data dari fail JSON dengan permintaan AJAC (data yang boleh disimpan dalam penyemak imbas secara berterusan jika perlu atau secara tempatan pada objek JS). Ia kemudian menggunakan pemilihan pinggir bandar untuk autopopulate bidang postkod lain dan nyatakan apabila pinggir bandar berubah. Bekerja seperti merawat dalam semua pelayar kecuali Safari. Nota: Datalist HTML masih tidak sesuai dengan semua pelayar. Lihat keserasian. Untuk plugin backfill menggunakan yang satu ini: jQuery.relevantdropdowns.js - ia memasukkan tag UL dengan li untuk pilihan dalam menggantikan pilihan datalist.

HTML5 DATALIST TAG

jQuery penuh

Kod ini memaparkan Datalist melalui JSON dan Auto mengisi bidang lain berdasarkan pemilihan lengkap auto medan oleh pengguna.

<span>window.DATALIST = {
</span>
    <span>cache: {},
</span>
    <span>init: function()
</span>    <span>{
</span>        <span>var _this = this,
</span>            <span>this.cache.$form = $('formid');
</span>            <span>this.cache.$suburbs = this.cache.$form.find('datalist#suburbs');
</span>            <span>this.cache.$suburbInput = this.cache.$form.find('input[name="suburb"]');
</span>            <span>this.cache.$postcodeInput = this.cache.$form.find('input[name="postcode"]');
</span>            <span>this.cache.$stateInput = this.cache.$form.find('input[name="state"]');
</span>
        <span>//grab the datalist options from JSON data
</span>        <span>var checkMembershipRequest = $.ajax({
</span>            <span>type: "GET",
</span>            <span>dataType: "JSON",
</span>            <span>url: "/php/suburbs.php"
</span>        <span>});
</span>
        checkMembershipRequest<span>.done(function(data)
</span>        <span>{
</span>            <span>console.log(data);
</span>
            <span>//data could be cached in the browser if required for speed.
</span>            <span>// localStorage.postcodeData = JSON.stringify(data);
</span>
            <span>//add options to datalist
</span>            $<span>.each(data.suburbs, function(i<span>,v</span>)
</span>            <span>{
</span>                _this<span>.cache.$suburbs.append(''+i+'');
</span>            <span>});
</span>
            <span>//hook up data handler when suburb is changed to autocomplete postcode and state
</span>            _this<span>.cache.$suburbInput.on('change', function()
</span>            <span>{
</span>                <span>// console.log('suburb changed');
</span>                <span>var val = $(this).val(),
</span>                    selected <span>= _this.cache.$suburbs.find('option[data-value="'+val+'"]'),
</span>                    postcode <span>= selected.data('postcode'),
</span>                    state <span>= selected.data('state');
</span>                _this<span>.cache.$postcodeInput.val(postcode);
</span>                _this<span>.cache.$stateInput.val(state);
</span>            <span>});
</span>
        <span>});
</span>
        checkMembershipRequest<span>.fail(function(jqXHR<span>, textStatus</span>)
</span>        <span>{
</span>            <span>console.log( "postcode request fail - an error occurred: (" + textStatus + ")." );
</span>            <span>//try again...
</span>        <span>});
</span>
    <span>}
</span>
<span>}</span>

penuh html

Inilah yang kelihatan seperti HTML anda:

*Suburb:





*Postcode:

State:

penuh JSON

Fail PHP Mengembalikan JSON - boleh. Json atau .php dan ambil data dari pangkalan data jika diperlukan.

<span>{
</span>    <span>"suburbs": {
</span>        <span>"suburb1": {
</span>            <span>"postcode": "2016",
</span>            <span>"state": "NSW"
</span>        <span>},
</span>        <span>"suburb2": {
</span>            <span>"postcode": "4016",
</span>            <span>"state": "QLD"
</span>        <span>},
</span>        <span>"suburb3": {
</span>            <span>"postcode": "3016",
</span>            <span>"state": "CA"
</span>        <span>},
</span>        <span>"suburb4": {
</span>            <span>"postcode": "8016",
</span>            <span>"state": "WA"
</span>        <span>},
</span>        <span>"suburb5": {
</span>            <span>"postcode": "6016",
</span>            <span>"state": "SA"
</span>        <span>}
</span>    <span>}
</span><span>}</span>

HTML5 Trigger Datalist

Gunakan Alt Down Arrow untuk mensimulasikan tindakan pengguna. Anda perlu menggunakan jQuery untuk mensimulasikan kekunci utama pencetus. Keycode Alt = 18 (juga kekunci pengubah yang dipanggil Altkey) Keycode Down Arrow = 40

<span>var e = jQuery.<span>Event</span>("keydown");
</span>e<span>.which = 40;
</span>e<span>.altKey = true;
</span><span>$("input").trigger(e);</span>

Soalan Lazim (Soalan Lazim) Mengenai JQuery Ajax dan HTML5 DATALIST Autocomplete

Bagaimanakah saya boleh memuatkan pilihan datalist secara dinamik dengan Ajax dalam Firefox? Pertama, anda perlu membuat permintaan AJAX ke skrip sisi pelayan anda. Skrip ini harus mengembalikan data yang ingin anda isi dalam DataList. Sebaik sahaja permintaan AJAX berjaya, anda boleh menggunakan data tindak balas untuk mengisi datalist. Berikut adalah contoh mudah:

$. Ajax ({

url: 'Server-side-script',
kejayaan: fungsi (data) { var datalist = $ (' #your-datalist-id ');
datalist.empty ();
$ .eech (data, fungsi (indeks, nilai) {
datalist.Append ('');

Bagaimana saya boleh menggunakan jQuery Autocomplete dengan panggilan balik Ajax JSON? Anda perlu memulakan widget autocomplete pada medan input anda dan memberikan pilihan sumber. Pilihan sumber harus menjadi fungsi yang membuat permintaan AJAX dan menggunakan data tindak balas untuk mengisi cadangan autokomplete. Berikut adalah contoh:

$ ('#your-input-id'). AutoComplete ({
sumber: fungsi (permintaan, respons) { $ .ajax ({ url: 'Server-side-Script',
datatype: 'json',
data: {
term: request.term
},
kejayaan: fungsi (data) {
respons (data);

$. -Server-side-Script ',
Kejayaan: Fungsi (data) {
var datalist = $ ('#your-datalist-id ');
datalist.empty ();
$ .eech (data, fungsi (indeks, nilai) {
datalist.append ('');
});

}

});

Dalam kod ini, gantikan 'anda-datalis-id' dengan id datalist anda dan 'skrip-skrip anda' dengan URL anda Skrip sisi pelayan.

Bagaimana saya boleh mengendalikan kesilapan dalam permintaan JQuery Ajax? Kaedah yang paling biasa ialah pilihan panggilan balik 'ralat'. Pilihan ini adalah fungsi yang dipanggil apabila permintaan Ajax gagal. Fungsi ini menerima tiga argumen: objek JQXHR, rentetan yang menggambarkan jenis ralat, dan objek pengecualian pilihan jika seseorang berlaku. Berikut adalah contoh:

$. Ajax ({
url: 'Server-side-script',
kejayaan: fungsi (data) {
// mengendalikan tindak balas yang berjaya
},
ralat: fungsi (jqxhr, textstatus, errorthrown) { console.error ('Ajax permintaan gagal:' textStatus);
}
});

Bagaimana saya boleh menggunakan jQuery ajax untuk menghantar data ke pelayan?

Anda boleh menggunakan pilihan 'data' dalam kaedah jQuery AJAX untuk menghantar data ke pelayan. Pilihan 'data' harus menjadi objek di mana nama harta adalah kekunci data dan nilai harta adalah nilai data. Data dihantar ke pelayan dalam badan permintaan HTTP. Berikut adalah contoh:

$. 'Value1',
key2: 'value2'
},
kejayaan: fungsi (respons) {
// mengendalikan respons yang berjaya
}
});
Dalam kod ini, gantikan 'skrip-skrip-skrip anda' dengan URL skrip sisi pelayan anda, 'key1' dan 'key2' dengan kekunci data anda, dan 'Value1' dan 'Value2' dengan nilai data anda.

Atas ialah kandungan terperinci JQuery Ajax Html5 DataList Autocomplete Contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!