<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='../node_modules/jquery/dist/jquery.min.js'></script>
<style>
html,
body {
font-family: Arial, 'microsoft Yahei';
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.znTipsBox {
position: relative;
}
input.znTips {
width: 120px;
height: 23px;
line-height: 23px;
border-radius: 3px;
border: 1px solid #ccc;
padding: 3px 12px;
}
input.znTips:focus~ul {
display: block;
}
.znTipsBox ul {
position: absolute;
left: 0;
top: 31px;
width: 100%;
border: 1px solid #ccc;
display: none;
}
.znTipsBox ul li {
padding: 3px 12px;
font-size: 12px;
line-height: 23px;
height: 23px;
}
.znTipsBox ul li:hover {
background-color: #eab;
cursor: pointer;
}
.znTipsBox.noResult ul li:hover {
background-color: #fff;
}
.znTipsBox.noResult ul li {
color: #000;
text-align: center;
}
.znTipsBox ul li .seclecText {
color: red;
}
</style>
</head>
<body>
<div class="znTipsBox">
<input type="text" class="znTips zn1" placeholder="请输入">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="znTipsBox">
<input type="text" class="znTips zn1" placeholder="请输入">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="znTipsBox">
<input type="text" class="znTips zn2" placeholder="请输入">
</div>
<script src='index.js'></script>
</body>
</html>
(function($) {
$.fn.inpTips_zd = function(opts) {
/*
功能：搜索提示，延时搜索
dom为input的class，不同数据库或者不同字段用不同的class
noresultText为默认的无搜索结果提示
ajax_request为获取后台数据的方法，需要自己按这个结构
{
"code": 200,
"data": [
{"name": "王五"}
{"name": "王五1"}
]
}
res.code如果不等200或者数据读取失败则返回：
callback(false, '这里写错误信息');
仿自:动脑学院
*/
//默认参数
var defaults = {
dom: '.zn1',
noresultText: '没有搜索结果',
ajax_request: function(callback) {
$.ajax({
url: 'data.json',
type: 'GET',
dataType: 'JSON',
success: function(res) {
if (res.code === 200) {
console.log(res.data)
callback(res.data);
} else {
callback(false, '这里写错误信息');
}
},
})
.fail(function(erro) {
callback(false, '这里写错误信息');
});
}
}
//如果有设置值则引用设置值否则默认
this.options = $.extend({}, defaults, opts);
if (!$(this.options.dom).length) return false;
//声明公用变量名
var $dom = $(this.options.dom),
dom = this.options.dom,
count = 1,
maxTime = 2,
parentBox = '.znTipsBox',
noresultText = this.options.noresultText,
ajax_request = this.options.ajax_request,
time = setInterval(function() {
count++;
}, 1000);
$dom.on('input', function() {
var searchInp = $(this).val();
var html = '',
ulClass = dom + '_ul',
self = this;
ulClass = ulClass.substr(ulClass.indexOf('.') + 1);
clear();
time = setInterval(function() {
count++;
if (count >= maxTime) {
clear();
if ($('.' + ulClass).length) $('.' + ulClass).remove();
ajax_request(function(data) {
if (arguments[0] === false) {
if (arguments.length > 1) {
$(self).parent(parentBox).addClass('noResult').append('<ul class="' + ulClass + '"><li>' + arguments[1] + '</li></ul>');
} else {
$(self).parent(parentBox).addClass('noResult').append('<ul class="' + ulClass + '"><li>' + noresultText + '</li></ul>');
}
return false;
}
$.each(data, function(index, el) {
html += '<li>' + el.name + '</li>';
});
$(self).parent(parentBox).removeClass('noResult').append('<ul class="' + ulClass + '">' + html + '</ul>');
$(self).parent(parentBox).on('mouseover', 'li', function(e) {
$(self).val(this.innerHTML);
})
if (!$(self).val()) {
$('.' + ulClass).remove();
html = '';
}
});
}
}, 1000)
if ($(self).val()) {
$('.' + ulClass).remove();
html = '';
}
});
//清除计时器
function clear() {
clearTimeout(time);
count = 1;
}
clear();
}
$(document).inpTips_zd();
}(jQuery));
// 例子如下
/*
<div class="znTipsBox">
<input type="text" class="znTips zn2" placeholder="请输入">
</div>
*/
$(document).inpTips_zd({
dom: '.zn2',
noresultText: '没有搜索结果',
ajax_request: function(callback) {
$.ajax({
url: 'data1.json',
type: 'GET',
dataType: 'JSON',
success: function(res) {
if (res.code === 200) {
callback(res.data);
} else {
callback(false, '这里写错误信息');
}
},
})
.fail(function(erro) {
callback(false, '这里写错误信息');
});
}
});
{
"code": 200,
"data": [
{
"id":1,
"name": "王五"
},
{
"id":2,
"name": "王五1"
},
{
"id":3,
"name": "王五2"
}
]
}
