آموزش استفاده از autocomplete در jqueryui php html jquery

1395-10-01

در این آموزش به شما نشان می دهم چگونه پلاگین Jqury UI Autocomplete را به یک منبع سروری (مثل دیتابیس) متصل کنیم. این کدها در چارچوب Codeigniter نوشته می شوند. وقتی در فاروم های مختلف جستجو می کردم این مشکل، مشکل مشترک خیلی از برنامه نویس ها بود و به این خاطر تصمیم گرفتم نحوه انجام این کار را به صورت آموزش در سایت قرار بدهم. برای استفاده از این پلاگین گام های زیر را به ترتیب انجام می دهیم:

دانلود پلاگین از سایت Jquery UI
اتصال به فایل های JS و CSS آن در HTML
ایجاد یک جدول بانک اطلاعات با چند داده
ایجاد یک فایل View کدایگنایتر برای نگهداری textbox
ایجاد یک فایل مدل کدایگنایتر
ایجاد یک فایل کنترلر کدایگنایتر
اعمال تابع autocomplete به textbox با استفاده از jquery

۱- دانلود پلاگین Jquey Ui Autocomplete

شما می توانید پلاگین را از وب سایت اصلی Jquery UI دانلود کنید

۲- اتصال به فایل های JS‌ و CSS

بعد از دانلود پلاگین اول نیاز داریم تا آنها را به بخش header فایل Index‌ اصلی ببریم و:

به فایل CSS که همراه پلاگین است متصل شویم

به کتابخانه Jquery‌ متصل شویم

به کتابخانه Jquery UI متصل شویم

<link href="css/jquery.ui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.js" type="text/javascript"></script>

۳- ایجاد بانک اطلاعات

برای این آموزش بانک اطلاعات ساده ای به نام members ایجاد کرده ام و به صورت زیر مقادیر را در آن ذخیره می کنم تا بتوانیم در مثال به سادگی از آن استفاده کنیم.

CREATE TABLE members (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(50),
family VARCHAR(50),
PRIMARY KEY (id)
) ENGINE = MYISAM ;

INSERT INTO members (id, name, family) VALUES
(1, "علی", "رضایی"),
(2, "حسین", "رضایی"),
(3, "بهمن", "شفیعی"),
(4, "محمد", "شفیعی"),
(5, "ناصر", "خسروی"),
(6, "رضا", "نادری"),
(7, "جاوید", "علوی"),
(8, "محمد", "علوی"),
(9, "جان", "کیوزاک"),
(10, "مت", "دیمون"),
(11, "لئوناردو", "دی کاپریو"),
(12, "بوروس", "ویلز"),
(13, "زنده یاد", "رابین ویلیامز"),
(14, "پیتر", "اشمایکل"),
(15, "کریس", "رونالدو"),
(16, "لیونل", "مسی"),
(17, "مانوئل", "نویر"),
(18, "مهدی", "رحمتی"),
(19, "جیانی", "بوفن"),
(20, "فیلیپ", "لام");

۴- فایل View کدایگنایتر (vw_members.php) و Textbox

در پروژه کدایگنابتر خود در پوشه views یک فایل view به نام vw_members.php ایجاد کنید. ما به این فایل برای نگهداری textbox ی که در آن جستجو می کنیم و نتیجه جستجو را نشان می دهد نیاز داریم. همچنین یک فیلد hidden نیاز به منظور ذخیره id سطر انتخاب شده ایجاد می کنیم.

<input id="txtMember_Fullname" name="txtMember_Fullname" type="text">

<input id="M_Id" name="M_Id" type="hidden">

۵. فایل مدل

در پوشه models کدایگنایتر یک فایل مدل به نام members_model.php ایجاد می کنیم.

class members_model extends CI_Model
{

function __construct()
{
    parent::__construct();
    $this->table_name = "members";
}

function Get_Members_List_All($fields,$fullname,$sort, $sort_order)
{
    $this->db->order_by($sort, $sort_order);
    $this->db->like("concat(name,' ',family)", $fullname);
    $this->db->select($fields);
    $query = $this->db->get($this->table_name);
    return $query->result();
}

}

۶- فایل کنترلر (members.php)

در فایل کنترلر در تابع index فایل view را فراخوانی می کنیم و نمایش می دهیم و در تابع get_members داده ها را از فایل مدل خوانده و به فایل view می فرستیم تا در textbox‌ و پلاگین autocomplete نمایش دهد.

پلاگین autocomplete داده را در فرمت هایی به صورت زیر قبول می کند:

الف- آرایه ای از رشته ها

["f1","f2",...]

ب- یک آرایه از اشیا با ویژگی های برچسب و مقدار:

[{value:"f1",key:"1"},{value:"f2",key:"2"},...]

ویژگی value در منوی پیشنهادی نمایش داده می شود و بعد از انتخاب به عنوان ورودی در input قرار می گیرد. مقدار key‌ نیز مقدار آیتم انتخابی از منو (در این مثال id) را در خود نگه می دارد.

در مثال زیر نشان می دهیم چطور هر یک از این ۲ حالت را ایجاد نماییم (در این مثال از حالت اول استفاده شده است):

class Members extends CI_Controller
{

    function __construct()
    {
        parent::__construct();
        $this->load->model('members_model');
    }

    public function index($id = null)
    {

        $this->template->load('vw_members');

    }

    function get_members()
    {
        if (isset($_GET["term"])) {
            $serach = $_GET["term"];
            $fields = array("id", "name", "family");
            $result = $this->members_model->Get_Members_List_All($fields, $serach, "name", "asc");
            $searchArray = array();
            foreach ($result as $row) {
                $row_set["value"] = $row->name . ' ' . $row->family; //build an array
                $row_set["key"] = $row->id;
                array_push($searchArray, $row_set);

            }
            echo json_encode($searchArray);
        }
    }

    function get_members()
    {
        if (isset($_GET["term"])) {
            $serach = $_GET["term"];
            $fields = array("id", "name", "family");
            $result = $this->members_model->Get_Members_List_All($fields, $serach, "name", "asc");
            foreach ($result as $row) {
                $row_set[] = $row->name . ' ' . $row->family;
            }
            echo json_encode($row_set);
        }
    }
}

۷- کد Jquery

سرانجام، ما باید به Jquery بگوییم که به کدام Textbox برای انجام عمل Autocomplete نیاز داریم و همچنین باید مسیر داده خود را با دادن مسیر به کنترلر و متد آن که عملیات بازیافت داده از بانک اطلاعات را انجام می دهند مشخص کنیم.

تابع autocomplete دارای گزینه هایی مانند minLength، تاخیر، موقعیت، و ... است که برای دیدن آن ها می توانید به سایت اصلی این پلاگین مراجعه و اطلاعات مورد نظر خود را کسب کنید.

$(document).ready(function () {
    $("#txtMember_Fullname").autocomplete({
        source: "<?php echo site_url("members/get_members/?");?>",
        select: function (event, ui) {
            $("#M_Id").val(ui.item.key);  // ui.item.value contains the id of the selected label

        },
        focus: function (event, ui) {
            $("#txtMember_Fullname").val(ui.item.label);
            return false;
        }
    });
});

نکته:‌ نمایش تصویر بارگزاری (loading) در زمان جستجو

برای اینکه در زمان جستجو تصویر بارگزاری را نشان دهید می توانید از کد زیر استفاده کنید:

<style>
    .ui-autocomplete-loading {
        background: #fff url('img/ajax-loading-image') right center no-repeat !important;
    }
</style>