jquery ajax动态模糊查询插件

html代码如下：

<div id="select_model"><div style="width: 150px;line-height: 24px"><input type="text" name="shop_name" autocomplete="off" class="shop-name-input-click" id="shop_name_input" data-url="{:U('CashAdmin/Shop/getLinkShopName')}"/><input type="hidden" name="shop_id" value="" id="shop_id_input"/></div><div class="shop-name-input-click" style="width: 150px;text-align: left;display: none;max-height:200px;overflow-y :auto;position: absolute;background: #fff;border: 1px solid #000;border-top: 0;" id="search_select_div"></div></div>

js代码如下：

ajax接口返回的数据格式：
[{“CONTENT”:“益丰店张师傅”,“CODE”:“1058125”},{“CONTENT”:“方志宏测试”,“CODE”:“1058254”}]

  //封装调用接口获取数据并展示
function req() {var url=$("#shop_name_input").attr('data-url');var inputval=$("#shop_name_input").val();$.ajax({type: "POST",url: url,data: "",success:function(data){var d=JSON.parse(data);var html="";for (var i=0;i<d.length;i++) {var r = d[i]['CONTENT'].indexOf(inputval);if(r != -1){html += "<div class=\"select_label\" data-shopid=\""+d[i]['CODE']+"\" style=\"line-height: 22px;\"><label style='padding-left: 4px;'>"+d[i]['CONTENT']+"</label></div>";}}if(html != ''){$("#search_select_div").html(html);$("#search_select_div").show();}}});
}
//输入框值改变的时候调用
$("#shop_name_input").on('input propertychange',req);
//输入框聚焦的时候调用
$("#shop_name_input").focus(req);
//事件代理，选择内容，并赋值到标签元素
$("#search_select_div").on("click","label",function(event){var elem = $( this );var lav=elem.html();var shop_id=elem.parent("div").attr("data-shopid");$("#shop_name_input").val(lav);$("#shop_id_input").val(shop_id);$("#search_select_div").hide();
});
//离开选择框隐藏选择框内容
$("body").click(function (e) {var inputid = e.target.id;var idname = 'shop_name_input';if(inputid != idname){$("#search_select_div").hide();}
});

jquery ajax动态模糊查询插件相关推荐

php ajax mysql 分页查询_PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
1.首先做主页面Ajax_pag.php 代码如下: Ajax做分页 .header{ margin-top: 20px; } 关键字: 地区代号地区名称父级代号 2.然后做分页查询JS页面Ajax_ ...
@MyBatis注解实现动态模糊查询
@使用MyBatis注解的方式实现动态模糊且多表查询一.使用环境及基本信息: 1.项目环境及框架:JDK1.8 + Maven + SpringBoot + MyBatis 2.使用的插件:TkMa ...
jQuery实现id模糊查询
在js中常常会用到某类似id的模糊查询,可以使用jquery工具和模糊查询"^",来实现.下面用另个例子说明 eg_1. 在页面中查找某id图片集合,先放到代码: <div ...
jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
ajax点击事件无法触发,解决jQuery Ajax动态新增节点无法触发点击事件的问题_婳祎_前端开发者...
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写οnclick="" ...
ajax 提交间隔,jQuery+Ajax实现限制查询间隔的方法
本文实例讲述了jQuery+Ajax实现限制查询间隔的方法.分享给大家供大家参考,具体如下: Jquery异步查询加载效果 .span_query { cursor:pointer;} $(funct ...
mybatis实现动态模糊查询
mybatis实现动态模糊查询直接写成 like '%#{house.areaName}%' 就当成是一个字符串,而#{ }写在字符串中不能识别,要改写成${ },这样可能会引发sql注入问题,不够 ...
2010.02.03——Jquery ajax 动态更新局部刷新
2010.02.03--Jquery ajax 动态更新局部刷新最后的效果如图所示 ,说要达到的目标就是: 当我选着不同的时间,最后一列的时间也跟着变,并且将一系列的参数传到后台,计算出结果,并填 ...
ajax jsp模糊查询源码,Ajax动态执行模糊查询功能
Ajax动态执行模糊查询功能内容精选换一换 Profiling采集的数据较多,同时解析后展示的性能指标项也比较多,为方便用户快捷查找到具体性能指标的含义,提供命令行查询功能:不包含metric_n ...

jquery ajax动态模糊查询插件

html代码如下：

js代码如下：

jquery ajax动态模糊查询插件相关推荐

最新文章

热门文章