先看一下效果圖::
第一張是下拉列表第一列是一個(gè)搜素框:
第二張圖能看出是 時(shí)時(shí)觸發(fā)的:
我想知道怎么實(shí)現(xiàn)的這個(gè)效果?
小伙看你根骨奇佳,潛力無限,來學(xué)PHP伐。
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.