Cara mengendalikan autolengkap dan autolengkap dalam borang PHP

WBOY
Lepaskan: 2023-08-11 18:40:01
asal
974 orang telah melayarinya

Cara mengendalikan autolengkap dan autolengkap dalam borang PHP

Cara mengendalikan autolengkap dan autolengkap dalam borang PHP

Dengan perkembangan Internet, orang ramai semakin bergantung pada ciri autolengkap dan autolengkap untuk memudahkan operasi mereka di tapak web. Melaksanakan fungsi ini dalam borang PHP tidaklah rumit Artikel ini akan memperkenalkan secara ringkas cara menggunakan PHP untuk mengendalikan auto-isi dan auto-lengkap borang.

Sebelum kita mula, kita perlu menjelaskan apa itu autolengkap dan autolengkap. Autolengkap merujuk kepada mengisi medan secara automatik dalam borang untuk pengguna berdasarkan input atau sejarah mereka sebelum ini. Contohnya, apabila pengguna memasukkan alamat e-mel, alamat e-mel yang mungkin diisi secara automatik berdasarkan input pengguna sebelumnya. Autolengkap merujuk kepada menyediakan pilihan yang mungkin secara automatik kepada pengguna semasa proses input mereka. Contohnya, apabila pengguna memasukkan nama bandar, kemungkinan nama bandar dipaparkan secara automatik untuk dipilih oleh pengguna.

Pertama, kami memerlukan pangkalan data untuk menyimpan data autolengkap dan autolengkap. Mari kita ambil nama bandar sebagai contoh Mula-mula, kita buat jadual pangkalan data bernama "bandar", yang mengandungi medan bernama "city_name" untuk menyimpan nama bandar.

CREATE TABLE city (

city_name VARCHAR(255) NOT NULL
Salin selepas log masuk

);

Seterusnya, kita perlu menyediakan beberapa data nama bandar untuk mengisi pangkalan data. Kami boleh menambah data secara manual atau mengimportnya menggunakan fail CSV.

MASUKKAN KE DALAM bandar (nama_bandar) NILAI

('北京'),
('上海'),
('广州'),
('深圳'),
('杭州');
Salin selepas log masuk

Sekarang kita mempunyai pangkalan data dan data sedia, kita boleh mula memproses borang. Pertama, kita memerlukan kotak input untuk menerima input pengguna.

Perlu diambil perhatian bahawa kami menetapkan atribut autolengkap kotak input kepada "mati" untuk mengelakkan autolengkap lalai penyemak imbas mengganggu autolengkap kami.

Seterusnya, kami menggunakan AJAX untuk melaksanakan fungsi autoisi dan autolengkap. Selepas kami memasukkan teks dalam kotak input, kami memperoleh nama bandar yang sepadan melalui AJAX dan memaparkannya dalam senarai juntai bawah.


<script><br>$(document).ready(function( ){</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>$('#city').keyup(function(){ var query = $(this).val(); if(query != ''){ $.ajax({ url:&quot;fetch.php&quot;, method:&quot;POST&quot;, data:{query:query}, success:function(data){ $('#cityList').fadeIn(); $('#cityList').html(data); } }); } }); $(document).on('click', 'li', function(){ $('#city').val($(this).text()); $('#cityList').fadeOut(); });</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>});<br></script>

Dalam kod di atas, kami telah menggunakan perpustakaan jQuery untuk memudahkan penggunaan AJAX. Selepas pengguna memasukkan teks, kami menghantar teks yang dimasukkan ke fail "fetch.php" untuk diproses melalui AJAX, dan memaparkan nama bandar yang dikembalikan dalam senarai juntai bawah. Selepas pengguna mengklik pada nama bandar, kami mengisi nama bandar ke dalam kotak input dan menyembunyikan senarai juntai bawah.

Jadi, bagaimanakah fail "fetch.php" mengendalikan permintaan? Seterusnya, mari tulis kod untuk fail "fetch.php".

//Sambung ke pangkalan data
$dsn = "mysql:host=localhost;dbname=test;charset=utf8";
$username = "root";
$password = "";
$ options = array(

PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
Salin selepas log masuk

);
try{

$db = new PDO($dsn, $username, $password, $options);
Salin selepas log masuk

}catch(PDOException $e){

die("连接数据库失败:" . $e->getMessage());
Salin selepas log masuk

}

// Dapatkan parameter permintaan AJAX
$query = $_POST['query'] ? ? '';

//Pertanyakan nama bandar yang sepadan dalam pangkalan data
$sql = "PILIH * DARI bandar DI MANA nama_bandar LIKE :query";
$stmt = $db->prepare($sql);
$stmt ->bindValue( ':query', '%'.$query.'%');
$stmt->execute();
$result = $stmt->fetchAll();

// Kembali ke senarai nama bandar
jika ($stmt->rowCount() > 0){

foreach($result as $row){
    echo "<li>". $row['city_name'] . "</li>";
}
Salin selepas log masuk

}else{

echo "<li>无匹配城市</li>";
Salin selepas log masuk

}
?>

Dalam kod di atas, kami mula-mula menyambung ke pangkalan data. Kemudian, kami mendapat parameter permintaan AJAX dan menggunakan pernyataan LIKE untuk menanyakan nama bandar yang sepadan dalam pangkalan data. Akhirnya, kami mengembalikan hasil pertanyaan ke bahagian hadapan.

Pada ketika ini, kami telah menyelesaikan pelaksanaan fungsi autoisi dan autolengkap dalam borang PHP. Pengguna hanya perlu memasukkan sebahagian daripada nama bandar, dan nama bandar yang sepadan akan diperoleh secara automatik dan dipaparkan dalam senarai juntai bawah. Selepas pengguna memilih nama bandar, ia secara automatik diisi dalam kotak input. Dengan cara ini, kami bukan sahaja menyediakan kaedah input yang mudah, tetapi juga meningkatkan pengalaman pengguna.

Sebagai kesimpulan, PHP menyediakan ciri yang berkuasa untuk mengendalikan autolengkap dan autolengkap dalam borang. Melalui reka bentuk pangkalan data yang munasabah dan teknologi hadapan, kami boleh melaksanakan fungsi ini dengan mudah dan membawa pengalaman interaktif yang lebih baik kepada pengguna. Saya harap artikel ini dapat membantu anda memahami dan menggunakan autolengkap dan autolengkap dalam borang PHP.

Atas ialah kandungan terperinci Cara mengendalikan autolengkap dan autolengkap dalam borang PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan