這個東西，我弄了很久才行，很頭大
jQuery.noConflict();sanshi_tip = function(divName)
{
//輸入框是否被選中 var input_is_have = false; //加載的div var tipDiv = divName; //輸入框的名字 var div_input_name = tipDiv+"_input"; var div_select_name = tipDiv+"_select"; var div_hidden_name = tipDiv+"_hidden"; var selectCss = "selectCss"; var notSelectCss = "notSelectCss"; //下拉表單的css樣式 var select_item_class = "selected"; //定義下拉div樣式 var select_div_class = "div_select"; //添加下拉表單的項 var addItem = function(str,num)
{
var input = jQuery(document.createElement("DIV")); input.attr('id',div_select_name+"_"+num); input.attr('list',num); input.text(str); input.mousemove(function(){ //判斷是否有被選中的 if(jQuery("#"+div_select_name+" ."+selectCss).attr('id')) { jQuery("#"+div_select_name+" ."+selectCss).removeClass(selectCss); jQuery("#"+div_select_name+" ."+selectCss).addClass(notSelectCss);
} //設置當前背景色 jQuery(this).removeClass(notSelectCss); jQuery(this).addClass(selectCss); select_is_have=true; jQuery(this).focus(); }); //設置鼠標過去後的效果 input.mouseout(function(e){ jQuery(this).removeClass(selectCss); jQuery(this).addClass(notSelectCss); select_is_have=false; }); //設置點擊效果 input.click(function(){ jQuery('#'+div_input_name).val(jQuery(this).text()); jQuery('#'+div_select_name).hide(); jQuery('#'+div_input_name).focus(); }); return input; } //建立下拉菜單函數 var buildList=function(arr) { jQuery('#'+div_select_name).html(""); for(i=0;i<arr.length;i++) { jQuery('#'+div_select_name).append(addItem(arr[i],i)); } if(jQuery("#"+div_select_name+" > div").size() > 0) { jQuery('#'+div_select_name).show(); }else{ jQuery('#'+div_select_name).hide(); } } //取得鍵值函數 var getKeyCode=function(e){e=e || window.event;return e.keyCode;}; //數據檢查函數 var checkData=function(str) { var title = fundArr; var temp = new Array(); for(j=0;j<title.length;j++) { var sstr = title[j]; if(str!="") { var len = sstr[0].indexOf(str); // 代碼 中文 拼音 if(sstr[0].indexOf(str) == 0 || sstr[1].indexOf(str) == 0 || sstr['fundpinyin'].indexOf(str) == 0) { temp.push(title[j][1]); //控制顯示條數 if(temp.length>20) break; } } } return temp; //jQuery("#"+div_select_name).show(); //jQuery("#"+div_select_name).text(temp.join('|')); } //初始化函數 var init=function() { var inputo = jQuery(document.createElement("input")); inputo.attr('type',"text"); inputo.attr('id',div_input_name); //按鍵彈起事件 inputo.keyup(function(e){input_down(e,jQuery(this).val());}); inputo.click(function(e){input_down(e,jQuery(this).val());}); //獲得焦點事件 inputo.focus(function(){input_is_have=true;}); //失去焦點事件 //inputo.blur(function(){}); // jQuery("#"+tipDiv).append(inputo); var inputo2 = jQuery(document.createElement("DIV")); inputo2.attr('id',div_select_name); inputo2.attr('class',select_div_class); inputo2.hide(); jQuery("#"+tipDiv).append(inputo2); var inputo3 = jQuery(document.createElement("input")); inputo3.attr('type',"hidden"); inputo3.attr('id',div_hidden_name); inputo3.attr('value',""); //inputo3.val(""); jQuery("#"+tipDiv).append(inputo3); jQuery('body').click(function(e){ e=e || window.event; var w = document.getElementById(div_select_name).offsetWidth; var h = document.getElementById(div_select_name).offsetHeight; var l = document.getElementById(div_select_name).offsetLeft; var t = document.getElementById(div_select_name).offsetTop; var x = e.clientX ; var y = e.clientY ; if(x-l>w || y-t>h) { jQuery('#'+div_select_name).hide(); } }); } //按鍵函數 var input_down = function(e,valuestr) { var keyCode = getKeyCode(e); if(jQuery('#'+div_hidden_name).val()==""||jQuery('#'+div_hidden_name).val() != valuestr) { var itemArr = checkData(valuestr); buildList(itemArr); jQuery('#'+div_hidden_name).val(valuestr); } var inputArr = jQuery("#"+div_select_name+" > div"); if(!jQuery("#"+div_select_name+" ."+selectCss).text()) { var list = 0; jQuery(inputArr.get(list)).removeClass(notSelectCss); jQuery(inputArr.get(list)).addClass(selectCss); } if(keyCode==40) { if(inputArr.size() > 0) { var list = parseInt(jQuery("#"+div_select_name+" ."+selectCss).attr('list'))+1; var list2 = list-1; if(list>=inputArr.size()) list = 0; jQuery(inputArr.get(list2)).removeClass(selectCss); jQuery(inputArr.get(list)).removeClass(notSelectCss); jQuery(inputArr.get(list)).addClass(selectCss); } } if(keyCode==38) { if(inputArr.size() > 0) { var list = parseInt(jQuery("."+selectCss).attr('list'))-1; var list2 = list+1; if(list <= 0) list = 0; jQuery(inputArr.get(list2)).removeClass(selectCss); jQuery(inputArr.get(list)).removeClass(notSelectCss); jQuery(inputArr.get(list)).addClass(selectCss); } } if(keyCode==13) { var list = parseInt(jQuery("#"+div_select_name+" ."+selectCss).attr('list')); jQuery('#'+div_input_name).val(jQuery(inputArr.get(list)).text()); jQuery('#'+div_select_name).hide(); } if(input_is_have && keyCode==13) { jQuery('#'+div_select_name).hide(); }else{ jQuery('#'+div_select_name).show(); if(inputArr.size() <= 0) { jQuery('#'+div_select_name).hide(); } } } init();
}代碼使用
<script>jQuery("document").ready(function(){ new sanshi_tip("sanshi2"); new sanshi_tip("sanshi3"); new sanshi_edit("sanshiedit1","editable","my_edit.php");});</script><div id="sanshi2"></div><p><p><p><p><p><p><p><div id="sanshi3"></div>我這裏使用的是json的數據，而且是提前生成好的，如果你需要修改數據方式只要修改
var checkData=function(str) 這個函數就可以了
addItem = function(str,num) 這個函數是往下拉表單裏添加內容
http://phpitem.com/search.php 查看效果
作者 叄石 sanshi0815
mail [email protected]
blog : http://blog.csdn.net/sanshi0815