jquery 实现输入框联想搜索

实际功能中有很多联想搜索在这里封装成方法，变成可复用的

 <div class="autoSupRelative"><input type="text" class="input" name="CompanyName" id="CompanyName" autocomplete="off"><ul class="autoSupAbsolute"></ul></div>

.autoSupRelative{position: relative;padding: 0;float:left;z-index:99;}
.autoSupAbsolute{position: absolute;left: 0;top:30px;background: #ffffff;border:1px solid #ccc;width:100%;max-height:240px;overflow-y: auto;margin: 0;padding: 0;box-shadow: 0px 2px 2px #ccc;display: none}
.autoSupAbsolute li{ list-style: none;cursor: pointer;padding: 5px;line-height: 22px;font-size: 12px;}
.autoSupAbsolute li:hover{background: #2dc3e8;color: #ffffff;}

/模糊查询
function SearchLike(jsons) {//var timerSerch = null;$(document).on('keyup', '[name=' + jsons.name + ']', function () {var This = this;this.timerSerch = setTimeout(function () {//如果一直输入，就先不查询，等键抬起500毫秒之后再进行查询。getSearchValue({This: This,Event: "keyup",url: jsons.url,fun: jsons.fun});}, 500);$(this).parents('.autoSupRelative').css({ 'zIndex': '100' });$(this).parents('.autoSupRelative').find('.autoSupAbsolute').show();}).on("blur", function () {$('.autoSupRelative').css({ 'zIndex': '' });});$(document).on('keydown', '[name=' + jsons.name + ']', function () {var _this = this;clearTimeout(_this.timerSerch);});$(document).on('click', '.autoSupAbsolute li', function (e) {var name = $(this).parents('.autoSupRelative').find('input[type=text]').attr('name');if (name == jsons.name) {var thisHtml = $(this).attr('companyName');//.replace('<span style="display: none; width: 0px; height: 0px;" id="transmark"></span>', '');//.split('<span')[0];// thisHtml = thisHtml.split(',')[0];if (jsons.HideName) {$(this).parents('.autoSupRelative').find('[name=' + jsons.HideName + ']').val($(this).attr("PK_Guid"));}if (thisHtml) {$(this).parents('.autoSupRelative').find('[name=' + jsons.name + ']').val(thisHtml);}if (jsons.fun1) {jsons.fun1(this);}$(this).parents('.autoSupRelative').find('[name=' + jsons.name + ']').siblings('ul').html('');$(this).parents('.autoSupAbsolute').hide();}});// $('[name=' + jsons.name + ']').on('click', function (e) {$(document).on('click', '[name=' + jsons.name + ']', function (e) {e.stopPropagation();var This = this;$('.autoSupRelative').css({ 'zIndex': '99' });$(this).parents('.autoSupRelative').css({ 'zIndex': '100' });$(this).parents('.autoSupRelative').find('.autoSupAbsolute').show();// if ($(this).parents('.autoSupRelative').find('ul li').length ==0) {//如果没有输入字段，就不重新检索$(this).parents('.autoSupRelative').find('ul').html('<div style="padding:0 10px;">数据加载,请稍后....</div>');getSearchValue({This: This,Event: "click",url: jsons.url,fun: jsons.fun});// }}).on("blur", function () {$('.autoSupRelative').css({ 'zIndex': '' });});$(document).on('click', function (e) {$('.autoSupAbsolute').hide();});function getSearchValue(json) {$.ajax({type: "GET",//POSTurl: json.url + encodeURIComponent($(json.This).val()),success: function (msg) {var htmlInit = '';//if (msg != "") {msg = JSON.stringify(msg)msg = msg.replace(/'/g, '"');//把单引号替换成双引号//var datas = jQuery.parseJSON(msg);var datas = []datas = jQuery.parseJSON(msg).result;var html = '';if (json.Event == 'click') {if (datas.length == 0) {$(json.This).next().val('');//清除隐藏域的赋值htmlInit = '<div style="text-align:center">未找到此项....</div>';} else {for (var i = 0; i < datas.length; i++) {if (json.fun) {htmlInit += json.fun(datas[i]);} else {htmlInit += '<li PK_Guid="' + datas[i].companyGuid + '"companyName="' + datas[i].companyName + '">' + datas[i].companyName + '</li>';}}}$(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').html(htmlInit);$(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').show();}if (json.Event == 'keyup') {if ($(json.This).val() == '') {$(json.This).parents('.autoSupRelative').find('ul').html('');$(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').hide();} else {if (datas.length == 0) {$(json.This).next().val('');//清除隐藏域的赋值html = '<div style="text-align:center">未找到此项....</div>';} else {for (var i = 0; i < datas.length; i++) {if (json.fun) {html += json.fun(datas[i]);} else {html += '<li PK_Guid="' + datas[i].companyGuid + '" companyName="' + datas[i].companyName + '">' + datas[i].companyName + '</li>';}}}$(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').html(html);}}// }},error: function () {$(json.This).parents('.autoSupRelative').find('ul').html('<div style="padding:10px;">数据加载失败....</div>');}});}
}// 使用--点击输入框，请求接口--url是联想搜索接口，companyName没有值的时候显示所有的列表--下拉列表选择把姓名和id复制给input
SearchLike({name: 'CompanyName', url: '/CompanyCustomBill/CompanySimpInfo?companyName=', fun1: function (_this) {$("#CompanyName").val($(_this).attr('companyName'));$("[name=CompanyGuid]").val($(_this).attr('PK_Guid'));}
});

jquery 实现输入框联想搜索相关推荐

javascript搜索框联想搜索_js实现输入框联想搜索
//模糊查询 functionSearchLike(jsons) {//var timerSerch = null; $(document).on('keyup', '[name=' + jsons. ...
用Rax开发一个联想搜索输入框，内附封装后的npm组件
来淘系实习已经一个半月了,在这里接触了一个之前未了解过的开发框架:Rax.从最开始拿到需求看着Rax一脸蒙蔽,到现在渐渐熟悉用Rax做开发,这个过程中也让我遇到了Rax的大大小小的问题.下面就来分享一 ...
javascript搜索框联想搜索_js实现类似于联想关键词的搜索功能（附代码）
本篇文章给大家带来的内容是关于js实现类似于联想关键词的搜索功能(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.页面代码: js/jQuery实现类似百度搜索功能 #c ...
javascript搜索框联想搜索_JavaScript实现搜索联想功能
-.虽然Jquery已经有了一个完整的包实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性回想起来实现此功能很简单,1.前端输入字符串文本改变异步请求服务器将返回的资料显示 ...
优秀的 jQuery 文本输入框自动完成自动提示插件
文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验.这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框 ...
php 实现联想式搜索,php实现联想搜索，你会吗？_后端开发
for和foreach哪个效率更高?为什么?_后端开发 1.作为一名phper,for和foreach循环遍历几乎每天都在使用,那么这两种遍历方式哪一种效率更高呢?2.效率高的原因是什么呢?3.原理分 ...
百度搜索的一个联想搜索框是如何实现的利用AJAX实现
实现类似于百度搜索的一个联想搜索框效果图考虑实现的步骤 1.创建相应的数据库并且存储数据 2.测试一下数据传输回来得搜索结果 3.模拟搜索页面 4.导入需要用到的JAR包和配置文件 5.在网页为输 ...
Android RxJava操作符的学习---过滤操作符----联想搜索优化
1. 需求场景 2. 功能说明 3. 具体实现布局文件:activity_filter.xml <?xml version="1.0" encoding="ut ...
angular联想搜索
转自:https://www.cnblogs.com/hjx-blog/p/6597681.html 组件组成:HTML模板 + JS文件组件原理:HTML模板就是规定组件由哪些元素构成,这些元素是 ...

jquery 实现输入框联想搜索

jquery 实现输入框联想搜索

jquery 实现输入框联想搜索相关推荐

最新文章

热门文章