select2插件与knockoutjs插件配合使用进行微信select下拉框开发

最近在用微信开发过程中需要设计多选下拉框。在开发过程中采用的是jquery-weui.js的select插件，开发出来后老板并不认可这种底部弹出选择的方式，觉得用户体验并不怎么好。不如在下拉框附近弹出体验好。因为在网页端多选下拉框设计中是采用的select2与knockoutjs配合使用的。效果不错，所以想拿来用。设计出来是这个样子的。

<select class="select2-container" id="Industry" multiple="multiple" data-bind="value:Industry"> </select>

相应的js代码：

 //简历编辑所属行业选择，可多选
            $("#Industry").select2({
                tags: true,
                tokenSeparators: [',', ' '],
                data: IndustryDataSelect2, //数据加载
                maximumSelectionLength: 3, //最多可多选3个
                minimumResultsForSearch: 20,
                language: "zh-CN"
            });


            //所属行业选择赋初始值
            var thisIndustry = (page.VM.ResumeVM.JobWant.Industry() == null ? "" : page.VM.ResumeVM.JobWant.Industry()).split(",");
            $("#Industry").val(thisIndustry).trigger("change");
            //所属行业选择改变，则相应隐藏自动Industry也自动改变
            $("#Industry").change(function() {
                page.VM.ResumeVM.JobWant.Industry(thisIndustry.join(","));
            });

page.VM.ResumeVM.JobWant.Industry(),data-bind这种用法是knockoutjs的特有方法，不在本文的讨论范围内，如果对其感兴趣，请自行在网上搜索研究。

代码写好后，在本地web开发工具中表现良好。然后上线。但上线后采用android手机测试，问题出来了。在点击select标签弹出下拉框的时候，手机的软键盘也弹出了。弹出后压缩了微信网页的空间。然后导致根本看不到select默认值，被软键盘挡住了。因为这个下拉框弹出在实际应用中没想着让用户输入文字进行筛选下拉框结果。select2下拉框有输入文字筛选结果的功能。这就要禁止软键盘的弹出了。

刚开始想从select2插件找相应的方法。因为select2有隐藏搜索框的设置，于是就把minimumResultsForSearch: 20

替换为了： minimumResultsForSearch: Infinity 但是不起作用。又进行了多种尝试，均不起作用。由于打算采用select2提供的方法解决软键盘弹出的方法均失败，只好把目光投到别处。在网上搜到，手机app开发中，采用blur()事件可以使软键盘不弹出，准备试一下。

页面中增加了这些js代码：

$('#Industry').on('select2:open', function(e) {

// Do something 

$("#Industry").blur();

console.info("start"); 

return false;

});

$('#Industry').on('select2:close', function(e) {

// Do something

console.info("end"); 

$("#Industry").blur(); 

return false;

});

select2:open,select2:close是select2插件支持的事件。上传到服务器，用android手机测试后，不错，不弹出软键盘了。

然后用iphone5s手机测试，测试结果令人大失所望，不止还会弹出软键盘，还在手机底部弹出了jquery-weui独有的select弹出框。真是令人崩溃。于是各种尝试。最终的结果是这个样子：

$('#Industry').on('select2:open', function(e) {
                // Do something
                $("#Industry").focus();
                $("#Industry").blur();
                console.info("start");
                if (IsIPHONE) {
                   
                    var input = new ObjBlur('Industry');
                    input = null;
                    stopBubble(e);
                    
                    
                }  
                $("#Industry").select(function () {
                    return false;
                });
                e.preventDefault();
                return false;

            });
            $('#Industry').on('select2:close', function(e) {
                // Do something
                console.info("end");
                $("#Industry").focus();
                $("#Industry").blur();
                if (IsIPHONE) {
                    
                    stopBubble(e);
                    var input = new ObjBlur('Industry');
                    input = null;
                   
                }
                $("#Industry").select(function () {
                    return false;
                });
                e.preventDefault();
                return false;
            });

//判断是否为苹果
var IsIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE') != -1;

// 元素失去焦点隐藏iphone的软键盘
function ObjBlur(id, time) {
    if ($.type(id) != 'string') throw new Error('objBlur()参数错误');
    var obj = document.getElementById(id),
        time = time || 0,
        docTouchend = function (event) {
            if (event.target != obj) {
                setTimeout(function () {
                    obj.blur();
                    document.removeEventListener('touchend', docTouchend, false);
                }, time);
            }
        };
    if (obj) {
        obj.addEventListener('focus', function () {
            document.addEventListener('touchend', docTouchend, false);
        }, false);
    } else {
        throw new Error('objBlur()没有找到元素');
    }
}

//阻止事件冒泡
function stopBubble(e) {
    //如果提供了事件对象，则这是一个非IE浏览器 
    if (e && e.stopPropagation)
        //因此它支持W3C的stopPropagation()方法 
        e.stopPropagation();
    else
        //否则，我们需要使用IE的方式来取消事件冒泡 
        window.event.cancelBubble = true;
}

增加了这些js代码后，iphone5s既不弹出软键盘了。也不弹出jquery-weui的默认select弹出框。然后又找了部iphone手机，是iphone4s，一测试，仍然有这样得问题。我很无语。由于这种情况，只能用usb直连手机进行测试。因为我没用过iphone手机，在这个直连测试中遇到很多问题。费时过长，而且一直用同事的手机也不太方便。最后作罢了。就支持到iphone5吧。貌似现在用iphone4的用户很少吧。啊哈哈，就是想偷个懒

select2插件链接：https://select2.github.io

knockoutjs链接：http://knockoutjs.com/