因JqueryUI的那个autocomplete不太好用,所以自己写了一个,很好用,相应你也用得上!
附上实际效果:
直接贴代码:
/*自动完成插件 @author lewdy @email 506641796@qq.com @date 2013-12-03
1.用法示例:
<input type="text" οnkeyup="Autocomplete({obj:this, source:source, value:'id', text:'name', select:selectfun})" />
2.参数说明
obj:绑定对象
source:数据列表,如var source = [{id:2, dept:"技术部", name:"张三"},{id:2, dept:"创意部", name:"李四"}];
value:值的key
text:显示文本的key
select:选择事件
*/
/*main method*/
function Autocomplete(config){
RemoveAutocomplete(); //remove
var html = [];
var source = config.source;
var value = config.value;
var text = config.text;
var obj = config.obj;
var selectfn = config.select;
$(source).each(function(i, d){
html.push('<li acindex="'+i+'" value="'+d[value]+'">'+d[text]+'</li>');
});
html = '<ul id="ldautolist">'
+ html.join("")
+ '</ul>';
$("body").append(html);
var ul = $("#ldautolist");
var li = ul.find("li");
ul.css("list-style", "none");
ul.css("border", "solid 1px #aaa");
ul.css("position", "absolute");
ul.css("top", obj.getBoundingClientRect().top+obj.height-10);
ul.css("width", obj.clientWidth);
ul.css("left", obj.getBoundingClientRect().left);
ul.css("border-radius", "4px");
ul.css("display", "block");
ul.css("padding", "0");
ul.css("background", "#FFF");
li.css("list-style", "none outside none");
li.css("display", "block");
li.css("border-radius", "4px");
li.css("font-size", "12px");
li.css("padding", "3px 0 3px 3px");
li.css("cursor", "pointer");
li.css("width", "96%");
li.css("margin", "0 auto");
li.mouseover(function(){
$(this).css("background", "#D9EDF7");
}).mouseout(function(){
$(this).css("background", "#FFF");
}).click(function(){
RemoveAutocomplete();
var selectObj = source[$(this).attr("acindex")];
if($(obj).val()){ //input?
$(obj).val(selectObj[text]);
}else{
$(obj).attr("value", selectObj[text]);
}
if(selectfn != null)
selectfn(selectObj);
});
}
/*remove*/
function RemoveAutocomplete(){
$("#ldautolist").remove();
}
创建一个js文件,复制以上代码,引用到页面中就可以使用了,前提是Jquery!