<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
版本號就看你下載的jQuery 來宣告。
接下來在你的 js 中，針對某一個 input 欄位，此例為料號，加入 auto complete 的功能 。
$("#material_text").autocomplete({
source : function(request, response) {
$.ajax({
url : $("#path").val() + 'ajax.action?method=list&act=find_material_text',
type : "POST",
dataType : "json",
cache : false,
delay : 1500,
data : {
term : request.term
},
success : function(data) {
// $("#material_desc").unblock();
response(
$.map(data , function(item) {
return {
label : item.label,
value : item.value,
desc : item.desc
};
})
);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
select : function(event, ui) {
$("#product_desc").attr('value', ui.item.desc);
}
});
以下針對上面的程式做簡單說明。
自動完成，主要是搭配 ajax 的技術，來動態向後端要值。此例是將回傳結果，回傳成類似下拉式的選單，讓使用者可以從這些選單做選擇，而不用記得全部的輸入值資料。可以在 SQL 中做 LIKE ，或是其它搜索方式，讓使用者不一定要從「頭」開始輸入。
delay 是輸入後趨動查詢的間隔時間，如果使用者想要馬上打馬上看，那間隔可以短一點，不過對後台的呼叫次數當然也會變多，若機器不是很強的時候可以調慢一點。
data : {
term : request.term
},這是要送到後台去的，term 可以在後面當成一個 parameter 來抓取。就是使用者目前輸入的值。
select : function(event, ui) {
$("#product_desc").attr('value', ui.item.desc);
} 這裡是指，當使用者「點選了自動完成給你的結果集」之後所觸發的事件。
若沒有要特別做什麼，這裡可以不用去實作。
這裡是將 ui.item.desc 的值設入 某個 html input element 中 。
ui.item 是固定的，就是後台回傳的一個一個物件。
desc 是你自己可以在後台加入的屬性。
desc 我是放料號的說明。等下會解釋。
這樣前端的部份大概就好了。再來後端要提供觸發回傳的結果集有哪些。
至於這一段方法怎麼去觸發，就是看你web framework 使用的是哪一種，簡單來說就是要觸發到這一段，並且要用 ajax + json 的方式吐回去。
value = p("term");
sb.append("[");
List<Object[]> list = sap.createSQLQuery("select top 500 MATERIAL,MATERIAL_DESC from MATERIAL where 1=1 and (material like :val or MATERIAL_DESC like :val )")
.setParameter("val", "%" + value + "%").list();
int i = 0;
for (Object[] ob : list) {
sb.append(String.format("{\"label\":\"%s\",\"value\":\"%s\",\"desc\":\"%s\"}", getString(ob[0]) + " " + getString(ob[1]).replaceAll("\"", ""), getString(ob[0]), getString(ob[1])));
if (i != list.size() - 1)
sb.append(",");
i++;
}
sb.append("]");
首先我只撈前500筆，若太多的話前端顯示會當掉。
可以用關鍵字查詢。
json 裡則有三個屬性 label , value 與 desc ，desc是我自己加的，要和前端的程式同名才能使用。
- label 放料號的 id + 說明。這個是顯示用的。
- value 則放料號的 id。這個值在點了之後，會真的塞到原來的 input field中。
- desc 則只放料號的說明。我拿這個值來塞到畫面別處，讓使用者可以看到很長的料號說明。 將此三值分開，在前端可以方便使用。
組json 字串是當初花比較多時間的部份。
getString = String.valueOf 而已。 p 是取parameter 我自己簡化過的方式。