/**
* Created by Leon on 2020/06
*/
//input添加上tb_select_realTime类名即可实时获取输入提醒
//data-search 中输入搜索的存储变量
$(function () {
var cpLock = false; //判断是否执行搜索 ps:打字的时候不会一直在搜索,字打上去才会执行
$('.tb_select_realTime').on('compositionstart', function () {
cpLock = true;
console.log("不搜索")
});
$('.tb_select_realTime').on('compositionend', function () {
cpLock = false;
console.log("搜索");
showLike($(this))
// var keyWord = oTxt.value;
// var fruitList = searchByRegExp(keyWord, fruits);
// renderFruits(fruitList);
});
$(".tb_select_realTime").on('input', function () {
if (!cpLock) {
showLike($(this))
// var keyWord = oTxt.value;
// var fruitList = searchByRegExp(keyWord, fruits);
// renderFruits(fruitList);
}
});
//input 聚焦时触发
$(".tb_select_realTime").focus(function () {
if (!cpLock) {
showLike($(this))
// var keyWord = oTxt.value;
// var fruitList = searchByRegExp(keyWord, fruits);
// renderFruits(fruitList);
}
})
function showLike(click_btn) {
//MasterIDValue 上级控件的值
//searchVal 附加的搜索条件
var searchVal = click_btn.val().trim()
//聚焦时可能input框值为空
if (searchVal == '') {
return
}
var sel_click_id = click_btn.attr('id');
var queryCondSource = click_btn.attr('data-search')
$.ajax({
url: u1,
type: "POST",
async: false, // 此处不需要异步
data: {
"requestType": "GhrCommonListSqlJson",
"queryCondSource": queryCondSource,
"queryCondType": "GetEnable",
"containBlankYN": 'N',
"MasterIDValue": '',
"keyWords": searchVal
},
success: function (data) {
if (eval(data) != '') {
$('#' + sel_click_id + '_down').remove()
var dataValue = eval(data).slice(0, 10)
sel_downHtml = '<div id="' + sel_click_id + '_down" class="sel_down tb_div_selDown">\n' +
'<div class="sel_down_detail">\n'
$.each(dataValue, function (index, content) {
sel_downHtml = sel_downHtml + '<div data-value="' + content.ID + '" pid="' + content.PID + '" title="' + content.Name + '" οnclick="assignment($(this),$(\'#' + sel_click_id + '\'))">' + content.Name + '</div>\n'
});
sel_downHtml = sel_downHtml + '</div>';
console.log(sel_downHtml);
$('body').append(sel_downHtml);
$('#' + sel_click_id + '_down').toggle();
var selClickX = click_btn.offset().left;
var selClickY = click_btn.offset().top - $(window).scrollTop();
var selClickW = click_btn.outerWidth();
var selClickH = click_btn.outerHeight();
$('#' + sel_click_id + '_down .sel_down_detail').css('left', selClickX).css('top', selClickY + selClickH).css('width', selClickW);
//点击下拉展示框以外的地方下拉框消失
$(document).click(function () {
$('#' + sel_click_id + '_down').hide();
});
$('#' + sel_click_id + '_down,#' + sel_click_id + '').on("click", function (event) {
//如果省略这一句,将下面的e改为event,那么IE运行可以,但是其他浏览器就不兼容
var e = arguments.callee.caller.arguments[0] || event;
if (e && e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
});
}
}
})
}
});
//选中赋值
function assignment(sel_down_div, sel_click) {
var selText = sel_down_div.text();
sel_click.val(selText);
sel_down_div.parent().parent().css('display', 'none');
}
效果图(后台传输数据参考效果图 css样式可自行定义)