(先要講明, 我是一個初階入門的菜鳥, 下面的內容可能是因為知識不足, 但不講又不快...)
個人對WEB FORM的應用上, 有一點點要求, 總想做到便捷, 快速的輸入, 當然, 這些要求,不是給那些會員注冊用的WEB FORM, 而是應用到商業上的系統上, 給客戶快捷輸入資料, 簡便地查詢他們想要的東西! 在WIN FORM上, 我們總能做到! 在每個TEXTAREA裡加入各總的: Action listener, 常用的有Keypress, Lose focus, Get focus 等...
當用到PHP以後, 這些東西都沒有了, 但有了AJAX以後, 情況看來有點轉變, 但到底改變了多少? 個人認為的確是個解決方案, 但同時又未能真正給人大力地在商用的資訊系統上, 大力地使用! 個人看的是開發的時間和複雜程度...
大家來看看以下代碼, 或者您們會知我想說什麼....
(FORM.PHP)
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type='text/javascript' src='js/supplier_action.js'> /*自己寫的功能,用來定義supplierID那一格的動作...*/</script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
/* UI 自動完成 */
Source_Page_Supplier = "dbcontrol/getSupplier_b.php";
supplier_Action();
});
</script>
<div id="UI_Supplier">
供應商號: <input type="text" id="supplierID" /><br/>
公司名稱: <input type="text" id="supplier_Company" /><br/>
聯絡人: <input type="text" id="supplier_Contact" /><br/>
國家: <input type="text" id="supplier_Country" />
貨幣: <input type="text" id="supplier_Currency" /><br/>
電郵: <input type="text" id="supplier_Email" /><br/>
運輸時間: <input type="text" id="supplier_TransitTime" />
運輸成本: <input type="text" id="supplier_TransitCost" /><br/>
</div>
<p>
<h3>Result:</h3> <ol id="result"></ol>
<div id="result_ID">ID: </div><!--input type="text" name="result_ID" id="result_ID" /--> <br/>
<div id="result_NAME">NAME: </div><!--input type="text" name="result_NAME" id="result_NAME" /-->
<br/>
<br/>
<div id="result_ID_B">ID: </div><!--input type="text" name="result_ID" id="result_ID" /--> <br/>
<div id="result_NAME_B">NAME: </div><!--input type="text" name="result_NAME" id="result_NAME" /-->
<div id="caculation"></div><!--input type="text" name="result_ID" id="result_ID" /--> <br/>
</p>
=============================================================================
(supplier_action.js)
function supplier_Action()
{
$( "#supplierID" ).autocomplete({
source: function(request, response){
/* CI 的控制和函數 */
$.get(Source_Page_Supplier, {
/* POST 的變數是 term 可以自訂,request.term 是系統參數,不可改 */
term: request.term}, function(data){
response($.map(data, function(item) {
return {
/* 處理傳回的資料:user_name 是變數,item.傳回的欄位名稱,例如:user_name
* 意思是 user_name = item.user_name
*/
my_ID: item.myid,
my_Company: item.myvalue
}
}
))
}, "json"); /* 使用 JSON 傳送資料 */
},
minLength: 1, /* 限定輸入幾個字後才會開始動作 */
cache: false,
focus: function( event, ui ) {
/* 當你把游標移到在下拉選單中,原本的輸入框要填入什麼,在這裡是原本輸入框的字
* 或是填入 $( "#user_tel" ).val( "ui.item.user_name" ); 會顯示你回傳的欄位變數內容
* 這是自訂變數 user_name
*/
$( "#result_ID" ).val();
return false;
},
select: function( event, ui ) {
/* 當你選擇完後,會執行那些動作。例如把值放到其他欄位裡 */
$( "#supplierID" ).val( ui.item.my_ID );
$( "#result_ID" ).hide();
$( "#result_NAME" ).hide();
return false;
}
});
/* 這裡是重新整理來源資料,在下拉選單中要輸出的資料是什麼 */
$( "#supplierID" ).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
/* 這裡非常重要:錯了就取不到資料喔!
* item.user_name 是變數名稱,不是你原始資料的欄位
* 請往上看「處理傳回的資料」,就是這個自訂變數 user_name:
* 其他 HTML 請自行理解!
*/
.append( "<a href=#>" + "<strong>" + item.my_ID + "</strong> --" + item.my_Company + "</a>" )
.appendTo( ul );
};
/* UI 自動完成 */
}
=============================================================================
(getSupplier_b.php)
<?php
require_once('config.php');
require_once(DB_PATH.'db.php');
$q = strtolower($_GET["term"]);
if (!$q) return;
//$q = "Be";
$db = new Db();
$link = $db->connect($config);
$rows = $db->table(TABLE_SUPPLIER)->field('*')->where(TABLE_SUPPLIER_COMPANYNAME." LIKE '%$q%' ")->findAll();//->order(TABLE_SUPPLIER_COMPANYNAME.' DESC')->findAll();
$array = array();
foreach($rows as $row)
{
$array[] = array(
'myid' => $row[TABLE_SUPPLIER_COMPANYID],
'myvalue' => $row[TABLE_SUPPLIER_COMPANYNAME]
);
}
echo json_encode($array);
flush();
?>