改造下拉框实现本地autocomplete效果,既能下拉,又能手动输入

分享 已结
11 1896
Marje
Marje VIP4 2017-12-20
悬赏:20飞吻
在select上增加lay-autocomplete属性
layui已把我们的select隐藏起来,新建了一个input元素和下拉列表
下面稍加改造,把select的id和name转移给input元素,点击事件调整一下,将下面代码替换form.js中相应位置的代码,注释中有Marje的为修改的地方
  //下拉选择框
select: function(){
var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title'
,NONE = 'layui-select-none', initValue = '', thatInput
, selects = elemForm.find('select'), hide = function (e, clear) {
if(!$(e.target).parent().hasClass(TITLE) || clear){
$('.' + CLASS).removeClass(CLASS + 'ed ' + CLASS + 'up');


if (typeof $(thatInput).attr('lay-autocomplete') === 'string') {//Marje,判断是否有lay-autocomplete属性
thatInput && initValue && thatInput.val();//有则不给thatInput赋值,使用自身的值
} else {
thatInput && initValue && thatInput.val(initValue);
}


}
thatInput = null;
}

,events = function(reElem, disabled, isSearch,isAutoComplete){//Marje
var select = $(this)
,title = reElem.find('.' + TITLE)
,input = title.find('input')
,dl = reElem.find('dl')
,dds = dl.children('dd')


if(disabled) return;

//展开下拉
var showDown = function(){
var top = reElem.offset().top + reElem.outerHeight() + 5 - win.scrollTop()
,dlHeight = dl.outerHeight();
reElem.addClass(CLASS+'ed');
dds.removeClass(HIDE);

//上下定位识别
if(top + dlHeight > win.height() && top >= dlHeight){
reElem.addClass(CLASS + 'up');
}
}, hideDown = function (choose) {
reElem.removeClass(CLASS+'ed ' + CLASS+'up');
input.blur();
if(choose) return;
notOption(input.val(), function (none) {
if (none) {
initValue = dl.find('.' + THIS).html();
if (isAutoComplete) {//Marje
input && input.val();
} else {
input && input.val(initValue);
}
}
});

};

//点击标题区域
title.on('click', function(e){
reElem.hasClass(CLASS+'ed') ? (
hideDown()
) : (
hide(e, true),
showDown()
);
dl.find('.'+NONE).remove();
});

//点击箭头获取焦点
title.find('.layui-edge').on('click', function(){
input.focus();
});

//键盘事件
input.on('keyup', function(e){
var keyCode = e.keyCode;
//Tab键
if(keyCode === 9){
showDown();
}
}).on('keydown', function(e){
var keyCode = e.keyCode;
//Tab键
if(keyCode === 9){
hideDown();
} else if(keyCode === 13){ //回车键
e.preventDefault();
}
});

//检测值是否不属于select项
var notOption = function (value, callback, origin) {
var num = 0;
layui.each(dds, function () {
var othis = $(this)
, text = othis.text()
, not = text.indexOf(value) === -1;
if (value === '' || (origin === 'blur') ? value !== text : not) num++;
origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE);
});
var none = num === dds.length;
return callback(none), none;
};

//搜索匹配
var search = function(e){
var value = this.value, keyCode = e.keyCode;

if(keyCode === 9 || keyCode === 13
|| keyCode === 37 || keyCode === 38
|| keyCode === 39 || keyCode === 40
){
return false;
}

notOption(value, function(none){
if(none){
dl.find('.'+NONE)[0] || dl.append('<p class="'+ NONE +'">无匹配项</p>');
} else {
dl.find('.'+NONE).remove();
}
}, 'keyup');

if(value === ''){
dl.find('.'+NONE).remove();
}
};

if(isSearch){
input.on('keyup', search).on('blur', function (e) {
thatInput = input;
initValue = dl.find('.' + THIS).html();
setTimeout(function(){
notOption(input.val(), function (none) {
if (isAutoComplete) {//Marje
input.val();
} else {
initValue || input.val(''); //none && !initValue
}
}, 'blur');
}, 200);
});
}

//选择
dds.on('click', function(){
var othis = $(this), value = othis.attr('lay-value');
var filter = select.attr('lay-filter'); //获取过滤器

if(othis.hasClass(DISABLED)) return false;

if(othis.hasClass('layui-select-tips')){
input.val('');
} else {
input.val(othis.text());
othis.addClass(THIS);
}

othis.siblings().removeClass(THIS);
select.val(value).removeClass('layui-form-danger')
layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
elem: select[0]
,value: value
,othis: reElem
});

hideDown(true);
return false;
});

reElem.find('dl>dt').on('click', function(e){
return false;
});

//关闭下拉
$(document).off('click', hide).on('click', hide);
}

selects.each(function(index, select){
var othis = $(this)
,hasRender = othis.next('.'+CLASS)
,disabled = this.disabled
,value = select.value
,selected = $(select.options[select.selectedIndex]) //获取当前选中项
,optionsFirst = select.options[0];

if (typeof othis.attr('lay-ignore') === 'string') return othis.show();


var isAutoComplete = typeof othis.attr('lay-autocomplete') === 'string',//Marje,增加属性autocomplete
elemId = othis.attr('id'), elemName = othis.attr('name');
if (isAutoComplete){//将移除select的id和name属性,将这两个属性移至input上
othis.removeAttr("id");
othis.removeAttr("name");
}



var isSearch = typeof othis.attr('lay-search') === 'string'
,placeholder = optionsFirst ? (
optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS)
) : TIPS;

//替代元素
var reElem = $(['<div class="' + (isSearch ? '' : 'layui-unselect ') + CLASS + (disabled ? ' layui-select-disabled' : '') + '">'
//Marje
, '<div class="' + TITLE + '"><input type="text" id="' + (isAutoComplete ? elemId : "") + '" name="' + (isAutoComplete ? elemName : "") + '" ' +(isAutoComplete?"lay-autocomplete":"")+' placeholder="' + placeholder + '" value="' + (value ? selected.html() : "") +'" '+ (isSearch ? '' : 'readonly') +' class="layui-input'+ (isSearch ? '' : ' layui-unselect') + (disabled ? (' ' + DISABLED) : '') +'">'
,'<i class="layui-edge"></i></div>'
,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'+ function(options){
var arr = [];
layui.each(options, function(index, item){
if(index === 0 && !item.value){
arr.push('<dd lay-value="" class="layui-select-tips">'+ (item.innerHTML || TIPS) +'</dd>');
} else if(item.tagName.toLowerCase() === 'optgroup'){
arr.push('<dt>'+ item.label +'</dt>');
} else {
arr.push('<dd lay-value="'+ item.value +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ item.innerHTML +'</dd>');
}
});
arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">没有选项</dd>');
return arr.join('');
}(othis.find('*')) +'</dl>'
,'</div>'].join(''));

hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender
othis.after(reElem);
events.call(this, reElem, disabled, isSearch, isAutoComplete);//Marje
});
}
回帖
  • Jack667
    2017-12-20
    没上图都没人来回复了,我来打破零回复[嘻嘻]
    0 回复
  • 楼主大神666,我也写了个素材源码分享站: http://www.erdangjiade.com/ [哈哈]
    0 回复
  • mei图演示个jier
    0 回复
  • 23333
    0 回复
  • syd4440
    2017-12-25
    ”将下面代码替换form.js中相应位置的代码,注释中有Marje的为修改的地方“,
    楼主能不能说具体点,打开form.js硬是没有找到对应的位置?
    还有这个lay-autocomplete属性, 属性值是留空吗?
    0 回复
  • Marje
    2017-12-26
    @syd4440 搜索select: function(){就行了,这是一整个方法。一般编辑器都能把方法折叠起来的哇,把这一整个方法替换掉。lay-autocomplete可为空也可不为空,只要有这个属性就行了
    0 回复
  • syd4440
    2017-12-26
    我在eclipse打开form.js 就是一行没有换行的巨长的代码?
    如下图:

    使用换行后是找到了开头,d={select:function(){var e,t="请选择。。。。。。
    但是定位d={ 的那个} 却编辑器却没有提示?
    0 回复
  • Marje
    2017-12-27
    @syd4440 不要用压缩版的js,去下源码GitHub上 https://github.com/sentsin/layui/
    0 回复
  • syd4440
    2017-12-27
    嗯,拷贝了整个方法,
    现在的情况:
    在select框输入后,再点击页面其他地方,输入的值不会再被清空,

    新出现问题:
    提交时,输入的值并没有被提交

    debug过程:
    1,看下是否把select的name 赋值给input框
    在替代元素下,给input,添加个失去焦点的事件,如下
    <input type="text" onblur="test(this.name)"
    在test方法中输出时,可以看到name是undefinied的,没有传进去
    2,看下获取当前的select的name 是否正确

    if (isAutoComplete){//将移除select的id和name属性,将这两个属性移至input上
    console.log('20171227: ' +elemId + ':' + elemName); //输出之前保存的id值和name值

    othis.removeAttr("id");
    othis.removeAttr("name");
    }

    输出是: 20171227: undefined : undefined
    下面是select的代码
    <select id="p_work_location" name="p_work_location" placeholder="" udp-lov="cux_zz_zydd" lay-search="" lay-autocomplete="" value="{{ d.work_location || '' }}"></select>
    请教下楼主,为什么明明有id,name,却获取不到?
    0 回复
  • Marje
    2017-12-27
    @syd4440 这个方法页只是我自己项目里用用,没有考虑那么全面,需要的话有些地方只能你自己修改了,出现那个问题是因为你调用了 form.render('select');又加载了一遍。因为一开始的时候把select的ID和name移到input上了,id和name都没了,再重载就是undefident了,建议你改下代码,保留select的ID,移除name这样就不会被提交,给input加上name,或者试用局部刷新select。按照这个思路做吧,修改页面要手动给input赋下值
      elemId = othis.attr('id'), elemName = othis.attr('id');
    if (isAutoComplete){//将移除select的id和name属性,将这两个属性移至input上
    othis.removeAttr("id");
    }
     //Marje
    , '<div class="' + TITLE + '"><input type="text" name="' + (isAutoComplete ? elemName : "") + '" ' +(isAutoComplete?"lay-autocomplete":"")+' placeholder="' + placeholder + '" value="' + (value ? selected.html() : "") +'" '+ (isSearch ? '' : 'readonly') +' class="layui-input'+ (isSearch ? '' : ' layui-unselect') + (disabled ? (' ' + DISABLED) : '') +'">'
    0 回复
  • syd4440
    2017-12-28
    上来感谢下楼主。
    按楼主的思路,做了点改动,只remove name的话,可以输入,但又出了个奇葩的问题:选择该下拉框的值后,所选中的值也会在其他下拉框中出现,判断是在click的响应事件有bug,问题出在
    layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
    elem: select[0]
    ,value: value
    ,othis: reElem
    });
    注释掉后,问题解决,没去深究,为了兼容原来的代码,就加了个判断
    var isAutoComplete = typeof select.attr('lay-autocomplete') === 'string';
    if(!isAutoComplete){
    layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
    elem: select[0]
    ,value: value
    ,othis: reElem
    });
    }
    目前没有问题[微笑]
    谢谢楼主的耐心解答。
    0 回复
本帖已设置禁止回复