JavaScript autocomplete TextBox (sugesti otomatis) dari database

Programming

oleh Vinci terakhir diubah pada 9 Agustus 2022.

Pelengkapan otomatis adalah fitur untuk menyarankan hasil yang relevan saat Anda mengetik di kotak teks. Misalnya, kotak teks pencarian Google secara otomatis menyarankan istilah pencarian dengan penekanan tombol.

Itu dapat diaktifkan menggunakan alat dan fitur sisi klien. Data kotak teks saran otomatis bisa statis atau dinamis.

Untuk pemuatan dinamis data jarak jauh, sumbernya adalah file atau database. Artikel ini menggunakan database sebagai sumber daya untuk mendapatkan hasil dinamis di backend.

Contoh berikut memberikan ide untuk skrip cepat untuk mengaktifkan fitur pelengkapan otomatis. Ini menggunakan perpustakaan JavaScript jQuery dan jQuery UI untuk implementasi yang mudah.

jQuery autocomplete() menggunakan titik akhir PHP pelengkapan otomatis.php Script kemudian memuat data jarak jauh ke dalam kotak teks di antarmuka pengguna.

Tampilkan demo

Contoh 1: Pelengkapan otomatis sederhana

Contoh cepat

<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
 $( "#textbox" ).autocomplete({
      source: "autocomplete.php",
      minLength: 2
    });
});
</script>
<input id="textbox" class="full-width" />

Skrip titik akhir PHP ini membaca hasil dari database dan menghasilkan output JSON untuk kotak teks pelengkapan otomatis.

Ini menerima istilah pencarian dari UI dan mencari di database untuk saran terkait.

pelengkapan otomatis.php

<?php
$name = $_GET['term'];
$name = "%$name%";
$conn = mysqli_connect('localhost', 'root', '', 'phppot_autocomplete');
$sql = "SELECT * FROM tbl_post WHERE title LIKE ?";
$statement = $conn->prepare($sql);
$statement->bind_param('s', $name);
$statement->execute();
$result = $statement->get_result();
$autocompleteResult = array();
if (! empty($result)) {
    while ($row = $result->fetch_assoc()) {
        $autocompleteResult[] = $row["title"];
    }
}
print json_encode($autocompleteResult);
?>

Database ini adalah database setup cepat yang dibuat untuk contoh ini. Contoh berikutnya juga membutuhkan database ini untuk menampilkan nilai tawaran otomatis.

Untuk mendapatkan pengalaman yang baik dalam menjalankan kode di atas, jalankan kueri database berikut.

CREATE TABLE `tbl_post` (
  `id` int(11) UNSIGNED NOT NULL,
  `title` text DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `tbl_post`
--

INSERT INTO `tbl_post` (`id`, `title`) VALUES
(1, 'Button on click event capture.'),
(2, 'On key press action.'),
(3, 'Overlay dialog window.);

Penyelesaian otomatis Javascript
Contoh 2: Memuat pelengkapan otomatis dengan ID

Fungsi AutoComplete melewati parameter tambahan secara default istilah, istilah membantah. Artinya, batasi jumlah hasil yang ditampilkan di kotak teks pelengkapan otomatis.

Mengembalikan hasil database berdasarkan istilah pencarian sebagai pasangan nilai kunci. Panggilan JavaScript mengulangi hasil dan memetakan nilai kunci sebagai pasangan nilai label.

Berguna ketika ID hasil diperlukan saat memilih item tertentu dari daftar saran otomatis.

Gambar di bawah ini menunjukkan nilai item dan ID yang diisi. Data ini ditempatkan di kotak teks dengan memilih item daftar pelengkapan otomatis.

Penyelesaian otomatis hasil dengan ID

Kode JavaScript berikut memiliki dua kotak teks. Kotak teks dengan pelengkapan otomatis diaktifkan.

Dengan mengetik di kotak teks itu, pelengkapan otomatis JavaScript akan memanggil skrip PHP sisi server. Callback menerima output JSON yang dikembalikan oleh skrip PHP.

Data JSON ini berisi asosiasi hasil dinamis dengan pengenalnya masing-masing. Dalam memilih item hasil pelengkapan otomatis, Pilih Akses ke fungsi panggilan balik item UI Tujuan – objek.

Mendapatkan ID dan judul posting dari paket data JSON menggunakan objek ini. Fungsi ini kemudian memanggil kotak teks UI target JavaScript untuk mengisi judul dan ID item yang dipilih.

<script>
$(document).ready(function() {
    $("#textbox").autocomplete({
        minlength: 3,
        source: function(request, response) {
            $.ajax({
                url: "get-result-by-additional-param.php",
                type: "POST",
                dataType: "json",
                data: { q: request.term, limit: 10 },
                success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item.title,
                            value: item.postId

                        };
                    }));
                }
            });
        },
        select: function(event, ui) {
            event.preventDefault();
            $('#textbox').val(ui.item.label);
            $('#itemId').val(ui.item.value);
        }
    });
});
</script>
<div class="row">
    <label>Type for suggestion</label> <input id="textbox"
        class="full-width" />
</div>
<div class="row">
    <label>Item id</label> <input id="itemId" class="full-width" />
</div>

Skrip PHP ini menerima parameter posting yang dikirim melalui fungsi pelengkapan otomatis.

Kata kunci pencarian dan batas hasil dikirim dari callback sumber mulai pelengkapan otomatis.

Script PHP ini menggantikan parameter tersebut dalam proses eksekusi query database.

Setelah menemukan hasilnya, ia merakit array ke dalam format JSON untuk dicetak sebagai daftar saran otomatis.

dapatkan-hasil-oleh-tambahan-param.php

<?php
$name = $_POST['q'];
$limit = $_POST['limit'];
$name = "%$name%";
$conn = mysqli_connect('localhost', 'root', '', 'phppot_autocomplete');
$sql = "SELECT * FROM tbl_post WHERE title LIKE ? LIMIT $limit";
$statement = $conn->prepare($sql);
$statement->bind_param('s', $name);
$statement->execute();
$result = $statement->get_result();
$autocompleteResult = array();
if (! empty($result)) {
    $i = 0;
    while ($row = $result->fetch_assoc()) {
        $autocompleteResult[$i]["postId"] = $row["id"];
        $autocompleteResult[$i]["title"] = $row["title"];
        $i ++;
    }
}
print json_encode($autocompleteResult);
?>

Contoh 3: Pelengkapan otomatis dengan pencarian terbaru

Contoh ini menunjukkan kotak pelengkapan otomatis dengan data teks dan gambar. Basis data untuk contoh ini berisi detail tambahan seperti: Keterangan Dan menampilkan gambar Untuk postingan

Jika Anda menginginkan solusi otomatis penuh gaya dan sederhana dengan teks, gunakan dua contoh di atas.

Contoh ini menggunakan BootStrap dan plain JavaScript tanpa jQuery. Pencarian terbaru pada fokus akan menampilkan kotak teks pelengkapan otomatis.

Buat UI pelengkapan otomatis dengan Bootstrap dan JavaScript disertakan

Lihat HTML ini akan memuat kotak teks pelengkapan otomatis dan aset JavaScript dan CSS yang diperlukan untuk antarmuka pengguna. partikel untuk objek langsung pelengkapan otomatis.js Menangani permintaan saran otomatis yang diberikan dari UI.

Kotak teks pelengkapan otomatis memiliki ini padaKeyPress Dan sedang fokus Fitur. partikel untuk objek langsung padaKeyPress Memanggil properti JavaScript untuk menampilkan daftar saran otomatis. Fitur lainnya adalah menampilkan pencarian terbaru di acara fokus kotak teks.

autocomplete-with-search-history/index.php

<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
    crossorigin="anonymous">
<script src="./assets/autocomplete.js"></script>
<style>
.post-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.remove-link {
    font-size: 0.75em;
    font-style: italic;
    color: #0000FF;
    cursor: pointer;
}
</style>
<input id="textbox" class="form-control"
    onkeyup="showSuggestionList(this.value)"
    onfocus="showRecentSearch()" autocomplete="off" />
<span id="auto-suggestion-box"></span>

Dapatkan daftar saran otomatis dari tabel database tbl_post

Fungsi JavaScript berikut dipanggil pada acara penekanan tombol bidang pelengkapan otomatis. Dalam contoh sebelumnya, ia menerima respons JSON untuk memuat penawaran dinamis.

Dalam skrip ini, ia menerima respons HTML dari titik akhir. Ini adalah HTML dengan daftar item saran otomatis yang tidak berurutan.

function showSuggestionList(searchInput) {
	if (searchInput.length &gt; 1) {
		var xhttp = new XMLHttpRequest();
		xhttp.open('POST', 'ajax-endpoint/get-auto-suggestion.php', true);
		xhttp.setRequestHeader(&quot;Content-type&quot;, &quot;application/x-www-form-urlencoded&quot;);
		xhttp.send(&quot;formData=&quot; + searchInput);
		xhttp.onreadystatechange = function() {
			if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
				document.getElementById('auto-suggestion-box').innerHTML = xhttp.responseText;
			}
		}
	}
	else {
		document.getElementById('auto-suggestion-box').innerHTML = '';
	}
}

ajax-endpoint/get-auto-sugesti.php

<?php
require_once __DIR__ . '/../lib/DataSource.php';
$dataSource = new DataSource();

if (isset($_POST["formData"])) {
    $searchInput = filter_var($_POST["formData"], FILTER_SANITIZE_STRING);
    $highlight="<b>" . $searchInput . '</b>';

    $query = "SELECT * FROM tbl_post WHERE title LIKE ? OR description LIKE ?
        ORDER BY id DESC LIMIT 15";
    $result = $dataSource->select($query, 'ss', array(
        "%" . $searchInput . "%",
        "%" . $searchInput . "%"
    ));

    if (! empty($result)) {
        ?>
<ul class="list-group">
<?php
        foreach ($result as $row) {
            ?>
    <li class="list-group-item text-muted"
        data-post-id="https://phppot.com/javascript/javascript-autocomplete-textbox-database/<?php echo $row["id"]; ?>"
        onClick="addToHistory(this)" role="button"><img
        class="post-icon" src="https://phppot.com/javascript/javascript-autocomplete-textbox-database/<?php echo $row["featured_image"]; ?>" /><span>
        <?php echo str_ireplace($searchInput, $highlight, $row["title"]); ?>
        </span></li>
<?php
        }
        ?>
</ul>
<?php
    }
}
?>

Penyelesaian otomatis Javascript tanpa jQuery

Tambahkan ke riwayat pencarian

Fungsi ini mengaktifkan JavaScript saat mengklik item daftar yang disarankan.

Fungsi ini membaca ID posting dan judul yang ditambahkan ke atribut data HTML5. Kemudian meneruskan detail ini ke skrip PHP sisi server.

function addToHistory(obj) {
	var selectedResult = obj.dataset.postId;
	fetch("ajax-endpoint/add-to-history.php", {
		method: "POST",
		body: JSON.stringify({
			selectedResult: selectedResult
		})
	}).then(function() {
		document.getElementById('textbox').value = obj.innerText;
	});
}

Titik akhir PHP ini memeriksa apakah item yang dipilih telah ditambahkan ke tabel riwayat database.

Dalam basis data, tbl_search_history Menyimpan riwayat pencarian.

Jika tidak ada data yang ditemukan dalam database, instance pencarian ditambahkan ke tabel ini.

ajax-endpoint/add-to-history.php

<?php
require_once __DIR__ . '/../lib/DataSource.php';
$dataSource = new DataSource();

$post_data = json_decode(file_get_contents('php://input'), true);
$selectedResult = filter_var($post_data['selectedResult'], FILTER_SANITIZE_STRING);
if (isset($selectedResult)) {

    $query = "SELECT * FROM tbl_search_history, tbl_post
        WHERE tbl_search_history.post_id = tbl_post.id
        AND tbl_post.id = ?";
    $result = $dataSource->select($query, 'i', array(
        $selectedResult
    ));

    if (empty($result)) {
        $query = "
        INSERT INTO tbl_search_history
            (post_id) VALUES (?)";

        $result = $dataSource->insert($query, 'i', array(
            $selectedResult
        ));
    }
}
?>

Tampilkan riwayat pencarian dengan fokus pada kotak teks pelengkapan otomatis

Fungsi ini memanggil titik akhir PHP untuk mengambil riwayat pencarian yang disimpan. Itu juga menerima respons HTML dari sisi server.

Respons HMTL dimuat ke dalam kotak teks saran otomatis di UI.

function showRecentSearch() {
	if (!(document.getElementById('textbox').value)) {
		fetch("ajax-endpoint/show-search-history.php", {
			method: "POST"
		}).then(function(response) {
			return response.text();

		}).then(function(responseData) {
			if (responseData != "") {
				document.getElementById('auto-suggestion-box').innerHTML = responseData;
			}
		});
	}
}

Dalam file PHP ini bergabunglah tbl_post Dan tbl_search_history Tabel database ini telah dicari sebelumnya untuk menyaring daftar kata kunci.

ajax-endpoint/show-search-history.php

<?php
require_once __DIR__ . '/../lib/DataSource.php';
$dataSource = new DataSource();

$post_data = json_decode(file_get_contents('php://input'), true);
$query = "SELECT tbl_post.* FROM tbl_search_history, tbl_post WHERE tbl_search_history.post_id = tbl_post.id ORDER BY id DESC LIMIT 10";

$result = $dataSource->select($query);
    ?>
<ul class="list-group">
<?php
    foreach ($result as $row) {
        ?>
    <li class="list-group-item text-muted" role="button"><img class="post-icon" src="https://phppot.com/javascript/javascript-autocomplete-textbox-database/<?php echo $row["featured_image"]; ?>" /><span><?php echo $row["title"]; ?></span>
        <span title="Remove from history"  class="remove-link" onClick="removeFromHistory(this, <?php echo $row["id"]; ?>)">[remove]</span></li>
<?php
    }
    ?>
</ul>

Hapus riwayat dari kotak teks saran otomatis

Saat Anda fokus pada kotak teks pelengkapan otomatis, UI menampilkan judul postingan yang baru saja ditelusuri.

Jika pengguna ingin menghapus pencarian terbaru, dimungkinkan dengan kode ini.

Entri saran otomatis memiliki ini mengambil Tautan di UI dengan mengklik tautan, catatan yang sesuai akan dihapus.

function removeFromHistory(obj, postId) {
	fetch("ajax-endpoint/remove-history.php", {
		method: "POST",
		body: JSON.stringify({
			postId: postId
		})
	}).then(function() {
		obj.parentNode.remove();
	});
}

Kode PHP ini menghapus contoh pencarian yang disimpan tbl_search_history Basis data memposting ID catatan permintaan penghapusan untuk mengaktifkan tindakan penghapusan.

ajax-endpoint/remove-history.php

<?php
require_once __DIR__ . '/../lib/DataSource.php';
$dataSource = new DataSource();

$post_data = json_decode(file_get_contents('php://input'), true);
$postId = filter_var($post_data['postId'], FILTER_SANITIZE_STRING);
$query = "
        DELETE FROM tbl_search_history WHERE post_id = ?";

$result = $dataSource->insert($query, 'i', array(
    $postId
));
?>

Pelengkapan otomatis dengan riwayat pencarian
Tampilkan DemoUnduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.