//模糊查询

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实现输入框联想搜索相关推荐

  1. javascript搜索框联想搜索_jQuery搜索框效果实现代码(百度关键词联想)

    可以实现关键词联想的,搜索框:集合了百度,谷歌,搜狗,360,腾讯等多家搜索 search.html的代码: 搜索框例子 *{margin:0 auto} 站内搜索 百度搜索 360搜索 腾讯搜索 搜 ...

  2. html 搜索框 自动补全,自动完成的搜索框javascript实现

    自动完成的搜索框javascript实现 2019-01-04 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了自动完成的搜索框javascript实现,编程之家 ...

  3. html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...

  4. 移动端iOS中input输入框搜索框软键盘出现换行而不是搜索

    iOS输入框搜索时软键盘出现换行而不是搜索,而且点击软键盘完成按钮不会执行搜索事件, 解决一,必须使用form表单提交,但是键盘出现搜索,ajax请求方法中得不到input的值, 解决,form表单上 ...

  5. php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery

    先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码 页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...

  6. android 搜索框组件,Android零基础入门|搜索框组件SearchView

    原标题:Android零基础入门|搜索框组件SearchView 一.SearchView概述 SearchView是搜索框组件,它可以让用户在文本框内输入文字,并允许通过监听器监控用户输入,当用户输 ...

  7. 搜索计算机找不到,win7找不到搜索框怎么办?win7找不到搜索框修复方法

    电脑安装上win7系统后搜索文件一般会利用搜索框功能,只要直接输入文件名就可以找到具体的文件了,但是一些用户说win7找不到搜索框,怎么回事呢?可能是设置不当导致的,为帮助大家解决win7找不到搜索框 ...

  8. 手机桌面百度搜索框不显示热词_高效搜索神器,你选listary还是火柴?

    本文预计阅读5分钟. 你的电脑桌面是否杂乱不堪呢? 是不是打开特定的文件,每次都要一级一级的打开目录呢? 试想这样一个场景,你需要找一个文件,你只记得它的名字,但你不记得它在什么位置了,这时你该怎么办 ...

  9. Android搜索框输入内容点击键盘的搜索按钮进行搜索

    今天测试提出这个问题,就是输入搜索信息点后点击键盘上面的搜索按钮不能进行搜索,因为了解过自定义键盘,所以我第一想到的就是自定义一个键盘,不过怎么想也是有点麻烦,后来问了一下同事,说是可以直接监听现有的 ...

  10. 小程序搜索框_小程序直播有了搜索入口 这波微信公域流量你要不要抓?

    [亿邦动力讯]日前,微信"搜一搜"上线直达小程序直播功能.这意味着,微信小程序直播有了一个搜索入口. 亿邦动力体验发现,在微信"搜一搜"输入美妆品牌名称&quo ...

最新文章

  1. shell批量创建和删除10个系统帐号密码(密码为随机10位字符串)
  2. java操作XML文件--读取内容
  3. UVa 590 Always on the run(简单链式DP)
  4. windows下写代码在linux下编译,如何在Windows中编译Linux Unix的代码(采用cygwin)?...
  5. linux 分区 格式化 挂载 新硬盘
  6. 数据库优化:SQL高性能优化指南,助你成就大神之路!
  7. mysql insert 不需要日志_MySQL数据库性能优化(1)「转」
  8. TensorFlow2.0:高阶操作
  9. linux中用at命令5分钟后执行,我使用过的Linux命令之at - 在指定时间执行一次任务...
  10. 【微信支付】springboot 微信app支付包括回调通知
  11. 从0到1,用张三的故事讲述一张中学生也能看懂的财务报表
  12. C3P0,alibaba连接池错误【已解决】-An exception occurred while acquiring a poolable resource. Will retry.
  13. Java虚拟机--判断可触及性(七)
  14. 微信公众号数据2019_2019年9月原创公众号排行榜数据报告出炉
  15. Java爬虫之JSoup使用教程
  16. 数据泄露的原因是什么?如何保护数据安全?
  17. H5活动邀请函用这个就可以了
  18. 新自媒体账号想要开直播?大周给你几点建议
  19. 关于交换机的现网接入配置简述
  20. layui报错Uncaught TypeError: tree is not a function

热门文章

  1. 最短路径-Dijkstra算法与Floyd算法
  2. Android网络优化之HttpClient
  3. 'imread' was not declared in this scope
  4. linux下大于2TB硬盘格式化及挂载,linux下大于2T的分区方法
  5. java创建solr core_Solr定义core.properties
  6. android手机变微软手机号码,手机居然变平板?微软沦落到抄袭5年前安卓设计
  7. hashmap 泛型_Java 基础 - 泛型
  8. oracle将时间加一天,加小时,加分,加秒
  9. java怎么读取word某一页内容_Word页码设置的3点技巧,提高排版效率,减少不必要烦恼...
  10. mysql 取绝对值_自学MySQL第六天