亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

java下拉列表包含搜素框并時(shí)時(shí)觸發(fā)? 這種功能是插件嗎?
伊謝爾倫
伊謝爾倫 2017-04-18 10:29:44
0
3
428

先看一下效果圖::
第一張是下拉列表第一列是一個(gè)搜素框:

第二張圖能看出是 時(shí)時(shí)觸發(fā)的:

我想知道怎么實(shí)現(xiàn)的這個(gè)效果?

伊謝爾倫
伊謝爾倫

小伙看你根骨奇佳,潛力無限,來學(xué)PHP伐。

reply all(3)
PHPzhong

Are you referring to front-end or back-end implementation?
For the front desk, there are corresponding plug-ins.
On the back desk, you only need to implement the interface

迷茫

Use jQuery.autocomplete in the frontend to set the length of the string you input before starting to request background data, etc. It’s troublesome to code on your mobile phone, just use Baidu on your own


Let’s get some code!

Use bootstrap’s typeahead to implement

<script type="text/javascript"
    src="/js/plugins/bootstrap3-typeahead.min.js"></script>

So you need to reference the relevant JS files on the page. If you don’t know where to download it, just download it from Baidu. Normal bootstrap has it

<input type="text" id="test">

I’ll just write whatever I want in the input box, because it’s not the point

//自動(dòng)補(bǔ)全
        $("#test").typeahead({
            minLength:3,//最小開始查詢的字符個(gè)數(shù)
            items:5,//下拉列表中最多顯示的條數(shù)
            source:function(query,process){//加載數(shù)據(jù)源
                //我們使用ajax去查詢
                $.ajax({
                    dataType:"json",
                    type:"POST",
                    url:"寫你自己的后臺(tái)請(qǐng)求地址",
                    data:{keyword:query},
                    success:function(data){
                    //這個(gè)data就是一個(gè)json對(duì)象的數(shù)組{id:xx,username:xxxx}
                        if(data && data.length){
                            process(data);
                            //process就是交給我們獲得數(shù)據(jù)之后用來調(diào)用的方法,這個(gè)方法執(zhí)行了,下拉列表就出來了
                        }
                    }
                });
            },
            //用來告訴typeahead怎么顯示json對(duì)象中的內(nèi)容
            displayText:function(item){
                return item.username
            }
        }).change(function(){
            var current = $(this).typeahead("getActive");
            if(current){
                $("#test").val(current.id);
            }
        });

The above is the JS code, remember to put it inside <script type="text/javasctrip"></scrip>

黃舟

JQuery’s drop-down box plug-in Chosen will provide this search function.
You can take a look at the example here: https://harvesthq.github.io/c...
If the drop-down box has a small amount of data, you can load it from the backend at once and initialize it in the plug-in. If the amount of data is large, you can also bind input events in the plug-in. Each time an element is input, an asynchronous request is triggered to load the matching elements on the backend.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template