因公司需要做一個仿百度搜尋框,並且帶Value值的, 網上找了下只有Text, 都沒帶Value的 所以做了個.
直接貼代碼。
(function($) {
var timeid;
var lastValue;
var options;
var c;
var d;
var t;
$.fn.autoComplete = function(config) {
c = $(this);
var defaults = {
width: c.width(), //提示框的寬度預設跟文字方塊一樣
maxheight: 150, //提示框的最大高度
top: 6, //與文字方塊的上下距離
url: "", //ajax 請求位址
type: "post ", //ajax 請求類型
async: false, //是否非同步請求
autoLength: 0, //文字長度大於0 就請求伺服器
getValue: function(value){ }, //當回車或滑鼠點選選取值的時候執行
clearValue: function(){ }, //當重新要求時清空Value值
getText: function(text){ } //當回車或滑鼠點選選中值的時候執行
};
options = $.extend(defaults, config);
var p = c.position();
d = $('
');
c.after(d);
d.css({ "left": p.left, "top": p.top c.height() options.top, "width": options.width, "max-height": options.maxheight });
t = $('
');
d.append(t);
d.append('
');
c.bind("keydown", keydown_process);
c.bind ("keyup", keyup_process);
c.bind("blur", blur_process);
d.bind("focus", focus_div);
d.bind("mouseout", mouseout_div);
}
function blur_process()
{
timeid = setTimeout(function(){
d.hide();
},200);
d.hide();
},200);
}
function mouseout_div()
{
t.find(".nowRow").removeClass("nowRow");
}
function focus_div()
{
;
c.focus();
}
function keydown_process(e)
{
if(d.is(":hidden")){
return;
}
switch(e.keyCode)
{
case 38:
e.preventDefault();
var p = t.find(".nowRow").prev();
if(p.length > 0){
d.setScroll(options.maxheight, p);
p.mouseover();
}else{
p = t.find(" tr:last");
if(p.length > 0){
d.setScroll(options.maxheight, p);
p.mouseover();
}
}
break;
case 40:
e.preventDefault();
var n = t.find(".nowRow").next();
if(n.length > 0) {
d.setScroll(options.maxheight, n);
n.mouseover();
}else{
n = t.find("tr:first");
if (n.length > 0){
d.setScroll(options.maxheight, n);
n.mouseover();
}
}
break;
case 13:
e.preventDefault();
var n = t.find(".nowRow");
if(n.length > 0){
options.getValue(n.find("input :hidden").val());
c.val(n.text());
options.getText(c.val());
lastValue = "";
d .hide();
}
break;
}
}
function keyup_process(e)
{
if(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 37 || e.keyCode == 39){
return;
}
if(c.val().length > options.autoLength){
if(c.val() == lastValue){
return; //判斷是否跟上一次的值相等, 考慮到用戶正在打字避免相同的值多次請求
}
lastValue = c.val(); //記錄請求值
options.clearValue(); //清空值
getData(c, function(data){
if(data .length == 0){
d.hide();
return;
}
t.find("tr").remove();
$.each(data, function(){
t.append('
| ' this.text '
|
' );
});
var rows = t.find("tr");
rows.mouseover(function(){
t.find(".nowRow").removeClass(" nowRow");
$(this).addClass("nowRow");
});
rows.click(function(){
options.getValue($(this).find( "input:hidden").val());
c.val($(this).text());
options.getText(c.val());
lastValue = "" ;
d.hide();
});
c.setPosition();
d.show();
});
}else{
lastValue = "";
d.hide();
}
}
function getData(o,process)
{
$.ajax({
type: options. type,
async: options.async, //控制同步
url: options.url,
data: o.attr("id") "=" o.val(),
dataType : "json",
cache: false,
success: process,
Error: function(err) {
alert(err);
}
});
alert(err);
}
});
}
$.fn.resetEvent = function()
{
c.bind("keydown", keydown_process);
c.bind("keyup", keyup_process);
c. bind("blur", blur_process);
d.bind("focus", focus_div);
d.bind("mouseout", mouseout_div);
}
$.fn.setPosition = function()
{
var p = c.position();
d.css({ "left": p.left, "top": p.top c.height() options.top });
}
$.fn.setScroll = function(h, o)
{
var offset = o.offset();
if(offset.top > h){
$(this).scrollTop(offset.top - h);
}else{
if(offset.top $(this).scrollTop(0);
$.fn.resetEvent(); 這個方法是重新綁定事件, 例如從一個容器 append到另一個容器 事件丟失了, append完可以使用該方法重新綁定事件。下面還有一些參數。
複製程式碼
程式碼如下:
var defaults = {
wid:wid.wid (), //提示框的寬度預設跟文字方塊一樣
maxheight: 150, //提示框的最大高度
url: "" , //ajax 請求位址type: "post", //ajax 請求類型async: false, //是否非同步請求autoLength: 0, //文字長度大於0 就請求伺服器getValue: function(value){ }, //當回車或滑鼠點選選取值的時候執行clearValue: function(){ }, //當重新要求時清空Value值getText: function( text){ } //當回車或滑鼠點選選取值的時候執行}; 好了。 唯一一個缺點就是 滑鼠點擊項目的時候 不放開會隱藏掉下拉框,具體看我程式碼,有能力的可以改下~
