จากตัวที่กรอกที่อยู่ที่ดีที่สุดในไทยถูกปรับให้ใช้งานกับ Laravel ได้ง่ายขึ้น
- คุณสามารถติดตั้งแพคเกจนี้ได้ผ่านทาง Composer
composer require baraear/laravel-thailand-js- เมื่อติดตั้งเสร็จแล้วให้ทำการเพิ่ม Service Provider ของแพคเกจที่ไฟล์
config/app.php
/*
* Package Service Providers...
*/
Baraear\ThailandJS\ThailandJSServiceProvider::class,- ทำการเพิ่ม Facade ของแพคเกจที่ไฟล์
config/app.php
/*
* Package Service Providers...
*/
'aliases' => [
'ThailandJS' => Baraear\ThailandJS\ThailandJSFacade::class,
]- ปรับปรุงไฟล์
autoload.php
composer dump-autoload- สร้างไฟล์สำหรับการตั้งค่าของแพคเกจ
php artisan vendor:publish --provider="Baraear\ThailandJS\ThailandJSServiceProvider" --tag="config"- ตรวจสอบการตั้งค่าที่ไฟล์
config/thailandjs.php
<?php
return [
/*
* หากคุณใช้ laravel-mix ในการ compile asset files.
*/
'use-mix' => false,
'path' => [
/*
* ระบุ path ของไฟล์ .js ในกรณีที่คุณไม่ได้ใช้ laravel-mix
*/
'js' => '/js/laravel-thailand-js',
/*
* ระบุ path ของไฟล์ .css ในกรณีที่คุณไม่ได้ใช้ laravel-mix
*/
'css' => '/css/laravel-thailand-js',
],
];- คัดลอกไฟล์ resoruces ที่จำเป็นสำหรับใช้งาน
php artisan vendor:publish --provider="Baraear\ThailandJS\ThailandJSServiceProvider" --tag="resources"- การประกาศใช้งานไฟล์ javascript และ stylesheet ในไฟล์
.blade.php
// สำหรับประกาศใช้งาน stylesheet ทั้งหมดที่จำเป็นจะต้องใช้งาน
{!! ThailandJS::styles(); !!}
// สำหรับประกาศใช้งาน javascript ทั้งหมดที่จำเป็นจะต้องใช้งาน
{!! ThailandJS::scripts(); !!}หากมีการเปิดใช้งาน
use-mixฟังก์ชั่นดังกล่าวจะไม่ส่งผลใดๆ
- การประกาศใช้งานฟังก์ชั่นของ
jquery.Thailand.js
/**
* Render ThailandJS JavaScript function.
*
* @param array|string $attributes
* @param string $onLoad
* @param bool $log
*/
{!! ThailandJS::render(['district' => '#demo1 [name="district"]', 'amphoe' => '#demo1 [name="amphoe"]', 'province' => '#demo1 [name="province"]', 'zipcode' => '#demo1 [name="zipcode"]', ], '#loader, .demo', false); !!}
/**
* Render ThailandJS JavaScript search function.
*
* @param string $searchable
* @param string $prepend
* @param string $onLoad
* @param bool $log
*/
{!! ThailandJS::search('#demo2 [name="search"]', '#demo2-output', '#loader, .demo', false); !!}หากไม่ได้กำหนดพารามิเตอร์แพคเกจจะทำการกำหนดให้ตามแบบตัวอย่างของ
jquery.Thailand.js
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery.Thailand.js</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit">
{!! ThailandJS::styles(); !!}
</head>
<body>
<div class="uk-container uk-padding">
<h1>Auto Complete ที่อยู่ อย่างที่มันควรเป็น</h1>
<div id="loader">
<div uk-spinner></div> รอสักครู่ กำลังโหลดฐานข้อมูล...
</div>
<form id="demo1" class="demo" style="display:none;" autocomplete="off" uk-grid >
<div class="uk-width-1-2@m">
<label class="h2">ตำบล / แขวง</label>
<input name="district" class="uk-input uk-width-1-1" type="text">
</div>
<div class="uk-width-1-2@m">
<label class="h2">อำเภอ / เขต</label>
<input name="amphoe" class="uk-input uk-width-1-1" type="text">
</div>
<div class="uk-width-1-2@m">
<label class="h2">จังหวัด</label>
<input name="province" class="uk-input uk-width-1-1" type="text">
</div>
<div class="uk-width-1-2@m">
<label class="h2">รหัสไปรษณีย์</label>
<input name="zipcode" class="uk-input uk-width-1-1" type="text">
</div>
</form>
</div>
{!! ThailandJS::scripts(); !!}
{!! ThailandJS::render(['district' => '#demo1 [name="district"]', 'amphoe' => '#demo1 [name="amphoe"]', 'province' => '#demo1 [name="province"]', 'zipcode' => '#demo1 [name="zipcode"]', ], '#loader, .demo', false); !!}
</body>
</html><!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery.Thailand.js</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit">
{!! ThailandJS::styles(); !!}
</head>
<body>
<div class="uk-container uk-padding">
<h1>Auto Complete ที่อยู่ อย่างที่มันควรเป็น</h1>
<div id="loader">
<div uk-spinner></div> รอสักครู่ กำลังโหลดฐานข้อมูล...
</div>
<form id="demo2" class="demo" style="display:none;" autocomplete="off">
<label class="h2">ค้นหาที่อยู่ของคุณ</label>
<small>ลองกรอกอย่างใดอย่างหนึ่ง ตำบล, อำเภอ, จังหวัด หรือ รหัสไปรษณีย์</small>
<input name="search" class="uk-input uk-width-1-1" type="text">
<div id="demo2-output" class="uk-margin"></div>
</form>
</div>
{!! ThailandJS::scripts(); !!}
{!! ThailandJS::search('#demo2 [name="search"]', '#demo2-output', '#loader, .demo', false); !!}
</body>
</html>กำลังอยู่ในระหว่างการพัฒนา...
คุณสามารถตรวจสอบการเปลี่ยนแปลงของแต่ละเวอร์ชั่นได้ที่ CHANGELOG.md.
คุณสามารถตรวจสอบคุณสมบัติใหม่ที่กำลังจะถูกเพิ่มเข้ามาในเวอร์ชั่นถัดไปได้ที่ TODO.md.
แพคเกจ laravel-thailand-js เป็นซอฟต์แวร์โอเพนซอร์สภายใต้การอนุญาต MIT license.