例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<!--<script src="//code.jquery.com/jquery-1.11.2.js"></script>-->
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
</head>
<body>
<div style="text-align: center;margin-top: 20px">
<input id="txtSearchKey" type="text" style="width:250px; height:30px;"/>
</div>
</body>
<style>
.autocomplete-ul {
/*max-height: 200px;*/
overflow-y: scroll;
}
.autocomplete-ul li {
margin: 2px;
padding: 2px 5px;
cursor: pointer;
display: block;
font-size: 14px;
line-height: 20px;
overflow: hidden;
}
.autocomplete-ul li .box p, .autocomplete-ul li .box div, .autocomplete-ul li .box a {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.autocomplete-ul li .box p {
margin: 0;
}
/* firefox only */
.autocomplete-ul li .box :not(p) {
clear: both;
}
.autocomplete-ul li .box :not(p) a {
float: left;
}
.autocomplete-ul li .box div:not(p):after {
content: "...";
float: left;
color: #000;
}
.autocomplete-ul li:hover {
background-color: rgb(195, 195, 195);
}
.autocomplete-ul .autocomplete_odd {
background-color: #f6f6f6;
}
</style>
<script>
function autocomplete(id, param, callback) {
//最小長度
var minLength = 2;
var autoFocus = false;
//延遲 單位毫秒
var delay = 500;
//ul id
var ulId = id + "Box";
//ul 的高度
var maxHeight = 200 + "px";
//搜素框
var obj = $("#" + id);
//長度
var width = obj.width();
if (param) {
// console.log(param)
if (param.minLength) {
minLength = param.minLength
} else if (param.autoFocus) {
autoFocus = param.autoFocus
} else if (param.delay) {
delay = param.delay;
} else if (param.ulId) {
ulId = param.ulId;
} else if (param.maxHeight) {
maxHeight = param.maxHeight + "px";
} else {
if (callback) {
} else {
callback = param;
}
}
}
// console.log(callback)
$.widget("ui.autocomplete", $.ui.autocomplete, {
//渲染列表 ul
_renderMenu: function (ul, items) {
if (callback && callback.renderMenu) {
callback.renderMenu(ul, items, this)
} else {
var that = this;
$.each(items, function (index, item) {
var li = that._renderItemData(ul, item);
});
}
$(ul).find("li:odd").addClass("autocomplete_odd");
$(ul).css({"max-height": maxHeight})
},
//每列渲染li
_renderItem: function (ul, item) {
if (callback && callback.renderItem) {
callback.renderItem(ul, item)
} else {
var li = $("<li>");
li.attr("title", item.title).append(item.label);
var html = "";
if (item.html) {
html = "<div class='box'>" + item.html + "</div>";
}
li.html(html);
return li.appendTo(ul);
}
},
_resizeMenu: function () {
if (callback && callback.resizeMenu) {
callback.resizeMenu(this.menu.element)
} else {
this.menu.element.outerWidth(width);
}
}
});
$.fn.extend({
//重寫控件的id方法
uniqueId: function () {
return this.each(function () {
if (!this.id) {
this.id = ulId;
}
});
},
//重寫去掉控件的id方法
removeUniqueId: function () {
return this.each(function () {
if (ulId.test(this.id)) {
$(this).removeAttr("id");
}
});
}
});
obj.autocomplete({
//搜索調用的函數
source: function (k, fn) {
// console.log(callback && callback.source)
if (callback && callback.source) {
callback.source(k, fn);
} else {
}
},
//搜素選擇回調
select: function (event, ui) {
// console.log(">>>>當智能提示框中任意一項被選中時發生，ui.item爲選中的項。");
// console.log(ui)
if (callback && callback.select) {
callback.select(event, ui);
} else {
}
},
//在搜索完成後智能提示框顯示前發生，可以在此事件中對顯示項進行處理
response: function (event, ui) {
$("#" + ulId).show()
// console.log(ui)
// console.log(">>>>在搜索完成後智能提示框顯示前發生，可以在此事件中對顯示項進行處理");
if (callback && callback.response) {
callback.response(event, ui);
}
},
//如果輸入域的值改變則觸發該事件
change: function (event, ui) {
if (callback && callback.change) {
callback.change(event, ui);
} else {
}
},
minLength: minLength,
autoFocus: autoFocus,
delay: delay
});
obj.focus(function () {
var ul = $("#" + ulId);
if ($(this).val() == "") {
ul.html();
} else {
ul.show()
}
});
$("#" + ulId).addClass("autocomplete-ul");
}
</script>
<script>
var callback = {
source: function (search, fn) {
console.log(search)
var data = [
{
title: "anders",
value: "ok",
html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
}, {
title: "anders",
value: "ok1",
html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
}, {
title: "anders",
value: "ok2",
html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
}, {
title: "anders",
value: "ok3",
html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
}, {
title: "anders",
value: "ok4",
html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
}, {
title: "anders",
value: "ok5",
html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
}, {
title: "anders",
value: "ok6",
html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
}, {
title: "anders",
value: "ok7",
html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
}
];
fn(data)
}
};
autocomplete('txtSearchKey', callback);
</script>
</html>
