html代码
<input id='searchNameName' type='text' placeholder='请输入关键字'/>
<div class="box"></div>
css样式
<style type='text/css'>
#searchNameName {
width: 300px;
}
.box {
position: absolute;
z-index: 1;
/* border: 1px solid #ccc; */
width: 300px;
/* height: 200px; */
overflow-y: auto;
background: #fff;
}
.box::-webkit-scrollbar { /*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.box::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
.box::-webkit-scrollbar-track { /*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
.box p {
border: 1px solid #ccc;
margin: 0;
padding: 2px;
cursor: pointer;
font-size: 14px;
color: #333;
transition: .4s;
letter-spacing: .5em;
height: 22px;
line-height: 22px;
}
.box p:last-child {
display: none;
}
.box p a {
text-decoration: none;
color: #000;
}
.box p:hover {
background: #ddd;
}
</style>
js部分
<script>
function searchName() {
var searchNameName = $('#searchNameName').val();
if (searchNameName == '') {
$('.box p').css('display', 'none');
} else {
$('.box p').each(function () {
//var pinyin = $(this).attr('pinyin');
// var cityName = $(this).attr('cityName');
var cityName = $(this).text();
// pinyin.indexOf(searchNameName) != -1
if (cityName.indexOf(searchNameName) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
}
}
$('#searchNameName').on('input propertychange', function () {
searchName();
});
/*聚焦时动态获取数据并展示*/
$('#searchNameName').on('input', function () {
$.ajax({
url: '',
type: 'post',
dataType: 'json',
data: {},
})
.done(function () {
console.log("success");
})
.fail(function () {
console.log("error");
})
.always(function () {
console.log("complete");
});
数据模拟
message = [
{id: 1, name: '李明', classid: 'a'},
{id: 2, name: '张三', classid: 'b'},
{id: 3, name: '李四', classid: 'c'},
{id: 4, name: '李武', classid: 'd'},
{id: 1, name: '黄晓', classid: 'a'},
{id: 2, name: '小红', classid: 'b'},
{id: 3, name: '小刚', classid: 'c'},
{id: 4, name: '小江', classid: 'd'},
{id: 1, name: '大大', classid: 'a'},
{id: 2, name: '大纲', classid: 'b'},
{id: 3, name: '大连', classid: 'c'},
{id: 4, name: '青岛', classid: 'd'},
{id: 1, name: '北京', classid: 'a'},
{id: 2, name: '广州', classid: 'b'},
{id: 3, name: '小小', classid: 'c'},
{id: 4, name: '青青', classid: 'd'},
{id: 1, name: '北北', classid: 'a'},
{id: 2, name: '李留', classid: 'b'},
{id: 3, name: '张柳', classid: 'c'},
{id: 4, name: '黄达', classid: 'd'},
{id: 3, name: '小小', classid: 'c'},
{id: 4, name: '青青', classid: 'd'},
{id: 1, name: '北北', classid: 'a'},
{id: 2, name: '李留', classid: 'b'},
{id: 3, name: '张柳', classid: 'c'},
{id: 4, name: '黄达', classid: 'd'},
];
$('.box p').text('');
for (var i = 0; i < message.length + 1; i++) {
var text = "";
for (var key in message[i]) {
text += message[i][key] + " ";
}
text = text.substring(0, text.length - 1);//去掉最右边空格
var p = document.createElement("p")
p.innerHTML = text;
$(p).addClass('ciytname', text);
//先筛选再渲染数据,避免每次每次都全部渲染
searchName();
$('.box').append(p);
}
var boxH = $('.box').height();
if (boxH >= 400) {
$('.box').css('height', '353');
}
/*点击将下拉的值赋给input的val*/
$('.box').on('click', 'p', function () {
var res = $(this).text();
// console.log(res);
arr = res.split(" ");
for (var i = 0; i < arr.length; i++) {
//console.log(arr[1]);
$('#searchNameName').val(arr[1]);
}
});
});
/*失焦后将动态数据删去*/
function dely() {
$('.box p').remove();
}
$('#searchNameName').blur(function () {
setTimeout('dely()', 200)
});
</script>
最终效果