Categories PHP-MySQL

Autocomplete của JQuery kết hợp PHP giúp đỡ công tốn sức

Bài toán như sau. Tôi cần làm một ứng dụng quản lý bán hàng cho nhân viên nhập đơn, dĩ nhiên người ta cần thông tin về sản phẩm. 

Điều quan trọng là người nhập cần nhập đúng tên sản phẩm và giá của nó. Dĩ nhiên người này chẳng thể nhớ nối giá rất nhiều hàng hoá mà mình bán, người ấy cần được gợi ý từ chương trình tự động.

Đồng thời chương trình này sẽ:

  • Làm cho thao tác nhanh hơn vì rút ngắn thời gian gõ tên sản phẩm
  • Hạn chế hoàn toàn tình trạng nhớ nhầm giá
  • Chuẩn hoá dữ liệu đầu vào

Dữ liệu sẽ được lưu trong cơ sở dữ liệu, và ta sẽ dùng các hàm trong php để lấy chúng ra, sau đó, kết hợp với hàm dựng sẵn rất đẹp của jQuery để tạo ra các gợi ý tự động.

Đoạn bên dưới là mẫu:

<script>
 <?php 
 $query="SELECT *
 FROM sanpham
 ORDER BY ma_san_pham";

 $result=$db->query($query); ?>

 $(function() {
 var availableTags = [
 <?php foreach ($result as $value) { 
 echo '"'.$value['ten_san_pham'].' '.$value['dungtich_khoiluong'].'/'.$value['gia_list'].'/'.$value['ma_san_pham'].'"'.",";
 } ?>
 ];
 $( ".tags" ).autocomplete({
 source: availableTags
 });
 });
 </script>

Khi nhân viên bán hàng gõ vào trường input bên dưới, các gợi ý sẽ được show ra giống kiểu Google Suggest vậy. Bạn chú ý phải có class là tags

Nội dung sẽ show ra bao gồm tên sản phẩm / dung tích / giá / mã sản phẩm

<input class="tags" name="san_pham_<?php echo $i ?>" placeholder="Gõ tên sản phẩm" onchange="gia<?php echo $i ?>();">

Một code ngắn vậy thôi mà giúp ích cực kỳ đấy. Tôi đã rất vui mừng khi biết nó

Back to Top