javascript搜索框联想搜索_js实现输入框联想搜索
//模糊查询
functionSearchLike(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').find('.autoSupAbsolute').show();
});
$(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('', '');//.split('
//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('
');
getSearchValue({
This: This,
Event:"click",
url: jsons.url,
fun: jsons.fun
});//}
}).on("blur", function() {
$('.autoSupRelative').css({ 'zIndex': ''});
});
$(document).on('click', function(e) {
$('.autoSupAbsolute').hide();
});functiongetSearchValue(json) {if(jsons.setUrl) {//jsons.setUrl();
json.url =jsons.setUrl();
}
$.ajaxSetup({ cache:false});
$.ajax(
{
type:"GET",//POST
url: 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 = '
';
}else{for (var i = 0; i < datas.length; i++) {if(json.fun) {
htmlInit+=json.fun(datas[i]);
}else{
htmlInit+= '
' + datas[i].companyName + '';
}
}
}
$(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 = '
';
}else{for (var i = 0; i < datas.length; i++) {if(json.fun) {
html+=json.fun(datas[i]);
}else{
html+= '
' + datas[i].companyName + '';
}
}
}
$(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').html(html);
}
}//}
},
error:function() {
$(json.This).parents('.autoSupRelative').find('ul').html('
');
}
}
);
}
}//使用--点击输入框,请求接口--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'));
}
});
javascript搜索框联想搜索_js实现输入框联想搜索相关推荐
- javascript搜索框联想搜索_jQuery搜索框效果实现代码(百度关键词联想)
可以实现关键词联想的,搜索框:集合了百度,谷歌,搜狗,360,腾讯等多家搜索 search.html的代码: 搜索框例子 *{margin:0 auto} 站内搜索 百度搜索 360搜索 腾讯搜索 搜 ...
- html 搜索框 自动补全,自动完成的搜索框javascript实现
自动完成的搜索框javascript实现 2019-01-04 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了自动完成的搜索框javascript实现,编程之家 ...
- html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
- 移动端iOS中input输入框搜索框软键盘出现换行而不是搜索
iOS输入框搜索时软键盘出现换行而不是搜索,而且点击软键盘完成按钮不会执行搜索事件, 解决一,必须使用form表单提交,但是键盘出现搜索,ajax请求方法中得不到input的值, 解决,form表单上 ...
- php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery
先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码 页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...
- android 搜索框组件,Android零基础入门|搜索框组件SearchView
原标题:Android零基础入门|搜索框组件SearchView 一.SearchView概述 SearchView是搜索框组件,它可以让用户在文本框内输入文字,并允许通过监听器监控用户输入,当用户输 ...
- 搜索计算机找不到,win7找不到搜索框怎么办?win7找不到搜索框修复方法
电脑安装上win7系统后搜索文件一般会利用搜索框功能,只要直接输入文件名就可以找到具体的文件了,但是一些用户说win7找不到搜索框,怎么回事呢?可能是设置不当导致的,为帮助大家解决win7找不到搜索框 ...
- 手机桌面百度搜索框不显示热词_高效搜索神器,你选listary还是火柴?
本文预计阅读5分钟. 你的电脑桌面是否杂乱不堪呢? 是不是打开特定的文件,每次都要一级一级的打开目录呢? 试想这样一个场景,你需要找一个文件,你只记得它的名字,但你不记得它在什么位置了,这时你该怎么办 ...
- Android搜索框输入内容点击键盘的搜索按钮进行搜索
今天测试提出这个问题,就是输入搜索信息点后点击键盘上面的搜索按钮不能进行搜索,因为了解过自定义键盘,所以我第一想到的就是自定义一个键盘,不过怎么想也是有点麻烦,后来问了一下同事,说是可以直接监听现有的 ...
- 小程序搜索框_小程序直播有了搜索入口 这波微信公域流量你要不要抓?
[亿邦动力讯]日前,微信"搜一搜"上线直达小程序直播功能.这意味着,微信小程序直播有了一个搜索入口. 亿邦动力体验发现,在微信"搜一搜"输入美妆品牌名称&quo ...
最新文章
- shell批量创建和删除10个系统帐号密码(密码为随机10位字符串)
- java操作XML文件--读取内容
- UVa 590 Always on the run(简单链式DP)
- windows下写代码在linux下编译,如何在Windows中编译Linux Unix的代码(采用cygwin)?...
- linux 分区 格式化 挂载 新硬盘
- 数据库优化:SQL高性能优化指南,助你成就大神之路!
- mysql insert 不需要日志_MySQL数据库性能优化(1)「转」
- TensorFlow2.0:高阶操作
- linux中用at命令5分钟后执行,我使用过的Linux命令之at - 在指定时间执行一次任务...
- 【微信支付】springboot 微信app支付包括回调通知
- 从0到1,用张三的故事讲述一张中学生也能看懂的财务报表
- C3P0,alibaba连接池错误【已解决】-An exception occurred while acquiring a poolable resource. Will retry.
- Java虚拟机--判断可触及性(七)
- 微信公众号数据2019_2019年9月原创公众号排行榜数据报告出炉
- Java爬虫之JSoup使用教程
- 数据泄露的原因是什么?如何保护数据安全?
- H5活动邀请函用这个就可以了
- 新自媒体账号想要开直播?大周给你几点建议
- 关于交换机的现网接入配置简述
- layui报错Uncaught TypeError: tree is not a function
热门文章
- 最短路径-Dijkstra算法与Floyd算法
- Android网络优化之HttpClient
- 'imread' was not declared in this scope
- linux下大于2TB硬盘格式化及挂载,linux下大于2T的分区方法
- java创建solr core_Solr定义core.properties
- android手机变微软手机号码,手机居然变平板?微软沦落到抄袭5年前安卓设计
- hashmap 泛型_Java 基础 - 泛型
- oracle将时间加一天,加小时,加分,加秒
- java怎么读取word某一页内容_Word页码设置的3点技巧,提高排版效率,减少不必要烦恼...
- mysql 取绝对值_自学MySQL第六天