問一下有沒有有人用過 Combobox 的 UI

edited 十月 2013 in Javascript
最近遇到一個問題挺頭痛的
在 jQuery UI 網站中有個 autocomple , 其中有一個 combobox 的範例
我有拿來用 , 當我的 <select> 內的 <option> 很多的時候(如100個) , IE 似乎因為效能問題會 lag
chrome 就不會 lag

不知道有沒有人用過類似的元件可以推薦的 , 不會發生效能問題的 combobox 呢 ?
這個元件必須以 <select> 為基礎 , 並且會以 option 當作 autocomplete 的來源


原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=5704

評論

  • edited 一月 2011
    @pigo
    我覺得如果這個問題影響很大就該棄用了..
    這時候就要有自幹精神!!
    開一個陣列去匹配option的value如何?
    然後塞值進去text再用.trigger()去觸發autocomplete
  • edited 一月 2011
    這個問題影響很大
    而且我覺得 jQuery UI 上的那個已經很精簡了
    我覺得我若自己幹 未必能寫的很好
    真的要自己幹
    可能要自己寫一個不是 base 在 jQuery UI 的
  • edited 一月 2011
    oh 媽的
    我找了好多天
    結果剛剛不小心被我找到這個
    http://jquery-easyui.wikidot.com/

    這裡面的都不是 base jquery ui , 但確 base jquery , 號稱輕量級的 , 完全解決我的問題
  • edited 一月 2011
    我有幹過類似的東西,是base在JQuery上的,是有點像FB選興趣的那個autocomplete,不過沒有涉及到select觸發
    但是我手邊已經沒有當初寫的開發版本了..只剩用google工具編譯過的版本..
    我覺得就算這部份自幹,也只是一個把option導到一個text的程序,不算是base 在 jQuery UI
    看起來不錯..風格有ExtJS的影子
  • edited 一月 2011
    我很笨的 饒了我這個老人吧 哈哈
  • edited 一月 2011
    pigo 寫道:
    最近遇到一個問題挺頭痛的
    在 jQuery UI 網站中有個 autocomple , 其中有一個 combobox 的範例
    我有拿來用 , 當我的 <select> 內的 <option> 很多的時候(如100個) , IE 似乎因為效能問題會 lag
    chrome 就不會 lag

    不知道有沒有人用過類似的元件可以推薦的 , 不會發生效能問題的 combobox 呢 ?
    這個元件必須以 <select> 為基礎 , 並且會以 option 當作 autocomplete 的來源

    ㄛ~有印象...
    是動態變更option 時會卡卡的是不是?
    如果option 多的話.... obj.options.length = 0; <--- 這個變動造成的
    數量越多..卡的時間越久...
    所以...後來我的解決方式...
    用 remove 掉原本的select...再append一個相同的回來...

  • edited 一月 2011
    不是動態變更 option 耶
    一開始 option 就會先從資料庫撈出來了
    所以是固定的
    chrome , firefox 完全沒這問題
    只有 IE 會卡 , 明早我在看看你說的變動可不可以改善
    謝了 , 先來睡啦
  • edited 一月 2011
    嗯.大同小異,我是remove option,再用參考陣列append回去
    不過jquery ui的問題應該是因為他不是直接取索引,而是去遍歷元素..IE受不了是很正常的
  • edited 一月 2011
    我直接在jquery ui的demo頁下js...
    $('#tags').autocomplete( "search" , 'a' ).val('a');
    這樣是可以直接觸發的所以我覺得這樣就可以了
    var selecter=<?php echo json_encode(array());?>;
    $(document).ready(function()
    {
        $('#select').change(function()
        {
            var k=$(this).val();//有陣列直接去匹配就會快
            $('#tags').autocomplete( "search" , selecter[k] ).val(selecter[k]);
        });
    });
    
  • edited 一月 2011
    我指的是這個...先忽略一開始的length = 5000
    這是我要先創造5000個下拉選項...

    然後按鈕a和按鈕b是模擬變動 select 下拉內容時先清除所有,再重新變更內容時作的動作...那個 .length 就是造成的卡卡原因..


    <body>
    <div id=abc>
    <select id=def>
    </select>
    </div>
    <script>
    document.getElementById('def').length = 5000;
    function a()
    {
           b = document.getElementById('abc');
           y = b.getElementsByTagName("select")[0];
           b.removeChild(y);
           select = document.createElement("select");
           select.setAttribute("id", "def")
           select.setAttribute("name", "def")
           b.appendChild(select);
    }
    
    function b ()
    {
            document.getElementById('def').length = 0;
    }
    </script>
    <input type=button value=a onclick=a();>
    <input type=button value=b onclick=b();>
    
    </body>
    

    另外這個觸發事件,我是這樣寫的
    當500微秒內有連續key字,每key一個字就執行settimeout...
    當500為秒內有key字,就清除前面那一個settimeout

    也就是當key動作停止...才作觸發事件...
    這樣可以減少每次key每次搜尋之問題...


    哈~我都是自幹..經驗分享一下..
  • edited 一月 2011
    但是noon大..在有JQuery加持的情況下..會感覺不到喔,不好意思抄了一下
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <body> 
    <div id=abc> 
    <select id=def> 
    </select> 
    </div> 
    <script> 
    function b()
    {
        $('#def').html('');
    }
    $(document).ready(function()
    {
        var s='';
        for(var i=0;i<5000;i++)
        {
            s+='<option></option>';
        }
        $('#def').html(s);
    });
    </script> 
    <input type=button value=a onclick="a();"> 
    <input type=button value=b onclick="b();"> 
    
    </body>
    
    Object > Array > String > Int / JS真是詭異的東西
Sign In or Register to comment.