<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="aboveTool.css">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="nav">
<input type="text" id="txtAddress">
<button class="search"></button>
</div>
<div>
<div class="autoComplete">
<ul></ul>
</div>
</div>
<script>
//-------注册地自动补全开始----------------------------------
var registerCity=$("#registerCity");
//创建自动完成的下拉列表，用于显示服务器返回的数据，插入在输入框后面，然后调整位置
var autocomplete=$('<ul class="autocomplete"></ul>').hide().appendTo("#searchBox");
//清空下拉列表的内容并且隐藏下拉列表
var clear= function () {
autocomplete.empty().hide();
};
//注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
registerCity.blur(function () {
setTimeout(clear,500);
});
//下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的下键就会移动高亮的项目
var selectedItem=null;
var timeoutId=null;
//设置下拉项的高亮背景
var setSelectedItem= function (item) {
selectedItem=item;
//按上下键是循环显示的，小于0就设置成最大值，大于最大值就设置成0
if(selectedItem<0){
selectedItem=autocomplete.find("li").length-1;
}else if(selectedItem>autocomplete.find("li").length-1){
selectedItem=0;
}
//首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
autocomplete.find("li").removeClass("highlight")
.eq(selectedItem).addClass("highlight");
};
var ajax_request= function () {
// ajax服务端通信
$.ajax({
url:site_url + "getfilePath/",
contentType:"application/x-www-form-urlencoded:charset=UTF-8",
type:"get",
dataType:"json",
data:{"inputval":$("#registerCity").val()},
success: function (res) {
var fileList = res.data;
if(fileList.length>0){
$.each(fileList, function (index, term) {
//创建li标签，添加到下拉列表中
$('<li></li>').text(term).appendTo(autocomplete)
.addClass("clickable")
.hover(function () {
$(this).siblings().removeClass("highlight");
$(this).addClass("highlight");
selectedItem=index;
}, function () {
$(this).removeClass("highlight");
selectedItem=-1;
}).click(function () {
//鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
registerCity.val(term);
//清空并隐藏下拉列表
autocomplete.empty().hide();
});
});//事件注册完毕
//设置下拉列表的位置，然后显示下拉列表
var ypos=registerCity.height()+4;
var xpos=registerCity.position().left;
autocomplete.css('width',registerCity.css('width'));
autocomplete.css({'position':'absolute','left':xpos+'px','top':ypos+'px',"z-index":"100"});
setSelectedItem(0);
//显示下拉列表
autocomplete.show();
}
}
});
};
//对输入框进行事件注册
registerCity.keyup(function (e) {
//字母数字、退格、空格
if(e.keyCode > 40 || e.keyCode == 8 || e.keyCode ==32){
//首先删除下拉列表中的信息
autocomplete.empty().hide();
clearTimeout(timeoutId);
timeoutId=setTimeout(ajax_request,100);
}else if(e.keyCode==38){
//上
//selectedItem=-1代表鼠标离开
if(selectedItem==-1){
setSelectedItem(autocomplete.find("li").length-1);
}else{
//索引减1
setSelectedItem(selectedItem-1);
}
e.preventDefault();
}else if(e.keyCode==40){
//下
if(selectedItem==-1){
setSelectedItem(0);
}else{
setSelectedItem(selectedItem+1);
}
e.preventDefault();
}
}).keypress(function (e) {
//enter回车键
if(e.keyCode==13){
//列表为空或者鼠标离开导致当前没有索引值
if(autocomplete.find("li").length==0||selectedItem==-1){
return;
}
registerCity.val(autocomplete.find("li").eq(selectedItem).text());
autocomplete.empty().hide();
e.preventDefault();
}
}).keydown(function (e) {
//esc后退
if(e.keyCode==27){
autocomplete.empty().hide();
e.preventDefault();
}
});
//------注册地自动补全结束----------------------------
</script>
</body>
</html>
*{
border: none;
outline: none;
padding: 0;
margin: 0;
}
.nav .search {
width: 44px;
height: 28px;
vertical-align: middle;
background: url(search.png) no-repeat center;
cursor: pointer; }
.nav {
background: #fff;
padding: 5px 0;
margin-bottom: 5px; }
.nav input {
height: 28px;
margin-left: 20px;
font-size: 16px;
width: 80%;
border-right: 1px solid #ccc;
vertical-align: middle; }
.autoComplete {
display: none;
background: #fff;
max-height: 350px;
overflow: hidden;
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.15); }
.autoComplete .suggestItem {
height: 35px;
line-height: 35px;
cursor: pointer; }
.autoComplete .suggestItem:hover {
background: #e6e6e6; }
.autoComplete .suggestItem i {
padding-left: 39px;
font-style: normal;
color: #666;
position: relative;
z-index: 1;
padding-top: 1px;
background: url(autoText.png) no-repeat 12px; }
.autoComplete .suggestItem em {
margin-left: 10px;
margin-right: 20px;
font-style: normal;
color: #999; }
.autoComplete .suggestItem.hover {
background: #e6e6e6; }
来源：CSDN
原文：https://blog.csdn.net/qq_17451827/article/details/79004404
image.png
image.png
后端配置：
urls：
from django.conf.urls import patterns
urlpatterns = patterns(
'myapp.views',
(r'^getfilePath/$', 're_filePath'),
)
views：
def re_filePath(request):
inputval = request.GET.get('inputval')
filePath = os.path.join(PROJECT_ROOT, 'excelPackage')
fileList = os.listdir(filePath)
filterList = []
for item in fileList:
if inputval in item:
filterList.append(item)
return render_json({"result":True,"data":filterList})
