jquery ui 有 自動完成 套件可以使用
http://jqueryui.com/autocomplete/
jquery 事件
http://api.jquery.com/change/
大概的做法如下,請參考看看囉
$(function() {
var maxRes = 15; // 定義資料最大長度
var inputOldValue = null; // 定義欄位舊值
$('#文字輸入欄ID').change(function(){ // 變更事件
if ($(this).val() != inputOldValue) // 判斷 目前欄位值是否等於舊的值，如果不同就取得新的資料
{
inputOldValue = $(this).val();
$("#文字輸入欄ID").autocomplete({
source : function(request, response) { // 資料來源
$.ajax({ // jquery ajax
url : "xxx.php", // 處理的網址
dataType : "json", // 返回內容的格式
minLength : 1, // 最小長度
data : { // 參數
max : maxRes, // 資料最大長度
q : $("#文字輸入欄ID").val()// 文字輸入欄值
},
success : function(data) {
$("#文字輸入欄ID").removeClass("ac_loading");
response($.map(data, function(item) {
return {
label : item.obj_name + " (ID:"
+ item.obj_id + ")",
value : item.obj_id + ":"
+ item.obj_name
};
}));
}
});
},
search : function() {
$(this).addClass('ac_loading');
},
select : function(event, ui) {
var strArr = ui.item.value.split(':');
$(this).val(strArr[1]);
$("#itemId").val(strArr[0]);
return false;
},
open : function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close : function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
}
});
});
});
Server及瀏覽器端做關鍵字的解析，可以有很多種變化應用@@...
SQL 可以試試
SELECT * FROM table where (stkey like '%serkey%' OR stkey like '%serkey1%' OR stkey like '%serkey2%')
[daidai 在 2014-1-28 06:48 PM 作了最後編輯]
