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/