初探JQuery之AutoComplete(自動完成文字輸入)
作者:Jay 日期:2009-11-24 17:37
之前常聽一些前輩在用JQuery,不過由於小弟功力不夠高深,所以還沒玩到那塊,但是後來才發現原來我天天接觸到...
相信各位也是,當我們在找資料問Google大神時,常常打一個字,底下就跑出來,這就是AutoComplete了....
這幾天在網上看到有人在教學,所以先學起來放,不過由於不熟JavaScript與JQuery,還是Try了一兩天才Try出來,AutoComplete有兩種用法,原理一樣只是取值的對象不同,一種是直接向網頁陣列取,一種則是向DB取,不多說先來個筆記記下:
基本配備:
1.當然是下載AutoComplete 套件
2.解壓縮到網頁目錄下(/var/www/html/jQuery)
以陣列取值:
1. 在<head></head>間加入:
<script type="text/javascript" src="./jquery-autocomplete/lib/jquery.js"></script>
<script type='text/javascript' src='./jquery-autocomplete/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='./jquery-autocomplete/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='./jquery-autocomplete/lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='./jquery-autocomplete/jquery.autocomplete.js'></script>
<script type='text/javascript' src='./jquery-autocomplete/localdata.js'></script>
<link rel="stylesheet" type="text/css" href="./jquery-autocomplete/main.css" />
<link rel="stylesheet" type="text/css" href="./jquery-autocomplete/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="./jquery-autocomplete/lib/thickbox.css" />
其中main.css與thickbox.css是畫面外觀設定可以不加,但是jquery.autocomplete.css是下拉選單的式樣,可以自行設定.
2.在<body></body>加入:
請輸入:<input type="text" name="InputText" id="InputText" />
3.最後在加上:
<script>
var name = ['王大民','王小明','張三','李四','胖虎','大雄','王力宏','王傑'];
$("#InputText").autocomplete(name, {matchContains: true});
</script>
其中name array就是下拉選單會去比對的值.
以DataBase取值:
1.一樣引入JQuery:
在<head></head>間加入:
<script type="text/javascript" src="./jquery-autocomplete/lib/jquery.js"></script>
<script type='text/javascript' src='./jquery-autocomplete/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='./jquery-autocomplete/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='./jquery-autocomplete/lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='./jquery-autocomplete/jquery.autocomplete.js'></script>
<script type='text/javascript' src='./jquery-autocomplete/localdata.js'></script>
<link rel="stylesheet" type="text/css" href="./jquery-autocomplete/main.css" />
<link rel="stylesheet" type="text/css" href="./jquery-autocomplete/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="./jquery-autocomplete/lib/thickbox.css" />
其中main.css與thickbox.css是畫面外觀設定可以不加,但是jquery.autocomplete.css是下拉選單的式樣,可以自行設定.
2. 在Body加入欄位:
請輸入:<input type="text" name="InputText" id="InputText" />
3. 最後加上:
<script>
$("#InputText").autocomplete('search.php');
</script>
其中search.php代表去執行SQL的地方,撈出您要的資料做比對.
4.search寫法:
<?
$searchText = $_GET["q"];//接入搜尋字串
#echo $searchText;
if (!$searchText) return;//判斷是否有字串傳入
include_once("../../../link.php");//引入link
$mysql = "SELECT company FROM company WHERE company LIKE '$searchText%';";//比對字串
#echo $mysql;
$query = mysql_query("$mysql");//執行mysql
$qcount = mysql_num_rows($query);//算總共有幾筆資料
if ($qcount > 0 ){//假設$qcount大於一執行
for ($i=1 ;$i<$qcount;$i++){ //跑幾次回圈
$qa = mysql_fetch_row($query); //撈出資料
foreach ($qa as $value){
echo $value."
";//撈出資料
}
}
}
?>
有圖有真相:
參考資料:
4.官網Demo
Linux使用zip壓縮與解壓縮
作者:Jay 日期:2009-11-18 17:15
用瀏覽器(FireFox,IE)開啟網路芳鄰檔案(內部資料存取)
作者:Jay 日期:2009-10-30 11:55
安裝TinyMCE所見即所得外掛What You See Is What You Get(WYSIWYG)
作者:Jay 日期:2009-10-26 17:47
之前就想在ERP修改讓使用者可以更方便的編輯文字,不過之前遇到一些狀況,以及主力改在報價單就沒有去研究,今天又拿來小試一下,發現問題解決了,所以就趕緊記下來.
我的環境是Linux,所以以下步驟都針對Linux,而我也是最簡單的範例而已.
服用方法:
1.當然是去Moxiecode System官網 下載TinyMCE.
2.下載到/var/www/html並且解壓縮.
3.解完其實就OK了,先來小測試一下,在瀏覽器輸入http://您ServerIP/tinymce/examples,應該就可以看到如下面的圖一.
4.接下來就中文化啦!!不過在這邊遇到一個很機車的問題,就是我在官網上面看不到TW字樣,因為Chinese是簡體的....
,又用關鍵字查了zh_tw...等字樣,不過都沒有,後來爬了文,嘗試自己將簡體改成繁體,不過由於此套件的編碼是ISO 639-1的編碼,不知道是不是跟i18n有關,所以得先把簡體轉成繁體,然後在透過官網上面的程式轉換成套件包,不過沒次都失敗,我也搞不清楚,連簡體本身也失敗,就在要放棄時突然看到Twi我想說點點看...沒想到是正體中文
5. 所以記得下載Twi 這個檔案(把左邊的框框打勾然後按Download)
6.將語系檔下載並解壓,然後會產生langs plugins thems三個資料夾,請分別複製到/tinymce/tinymce/jscripts/tiny_mce/ 相對應的檔案.
7.可以檢視其中一個例如langs應該會多出tw.js的檔案,其他資料夾也有類似tw的字樣,然後在tinyMCE.init內將language改為tw.
8.如果您要在其它已經寫好的程式使用,請在head加入,此部分:
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
language : "tw",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
9.其實上面就是TinyMCE的一些設定,您可以取捨哪些功能不要,移除既可.
圖示:
補充:
FreeBSD使用USB
作者:Jay 日期:2009-10-07 15:15
PHP上傳檔案
作者:Jay 日期:2009-09-12 16:11
JavaScript取小數點兩位四捨五入
作者:Jay 日期:2009-09-12 12:51
兩個Select同步
作者:Jay 日期:2009-08-31 16:36
