<!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" } ] }