一 直接先引入jquery-ui.js 大家可以在这里进行 jquery-ui下载
二 我们要有有个input框进行内容的输入,并且在下面写一个隐藏的div用于显示查出的补全信息
<input type="text" id="inputid" class="inputclass">
<div class="hide_div"></div>
三 然后就是我们的相关就是代码了, 当然如果有css样式要求可以根据项目实际情况去写
<script type="text/javascript">
$(document).ready(function(){
$("#inputid").autocomplete({
source: [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
</script>
当然如果是比较复杂一点的用接口进行查数据的话可以这样
<script type="text/javascript">
$(document).ready(function(){
$("#inputid").autocomplete({
source: function( request, response ) {
$.ajax({
url : "您的URL",
type : "post",
data : {localName : $("#input_localName").val()},
dataType : "json",
success: function( jsonData ) {
var data = eval(jsonData);
var context = "";
response( $.map( data, function( item ) {
/*获取后台匹配到的返回值*/
var name = item.localName+"";
var neId = item.managedElement+"";
/*拼接补全div内容 */
context = context + "<div class='append_div'><span class='append_span' οnclick=select('"+name+"')>"+name+"</span><div>";
}));
if(context != ""){
$(".hide_div").html(""); /* 清空上一次补全div中的内容 */
$(".hide_div").append(context);
$(".hide_div").show();
}else{
$(".hide_div").hide();
}
}
});
},
});
/*鼠标点击其他地方,补全的div消失 */
$("body").mouseup(function(){
$(".hide_div").hide();
});
})
/*该方法是再拼接div内容时加上的,即鼠标选中的时候,input框输入选中值 */
function select(name){
$("#inputid").val(name);
$(".hide_div").hide();
}
</script>