带搜索框的下拉选择

 1                                                 <div class="sel">
 2                                                     <div class="sel-t"></div>
 3                                                     <div class="sel-b">
 4                                                         <div class="d1"><input type="text" oninput="getperson(this.value)"></div>
 5                                                         <div class="d2 plist">
 6                                                             
 7                                                         </div>
11                                                     </div>
12                                                 </div>

 1         $(function(){
 2             getperson()
 3         })
 4         // 获取联系人
 5         function getperson(name){
 6             $.ajax({
 7                 url:'{:url("getperson")}',
 8                 type:'post',
 9                 data:{
10                     name:name
11                 },
12                 dataType:'json',
13                 success:function(res){
14                     if(res.code==1){
15                         var list = res.data
16                         var str = ''
17                         for(var i=0;i<list.length;i++){
18                             str += `<a href="javascript:;">`+list[i]['name']+`</a>`
19                         }
20                         $('.plist').html(str)
21                         // 选择
22                         $('.sel-b .d2 a').click(function(){
23                             $(this).parents('.sel-b').prev('.sel-t').text($(this).text())
24                             $('.sel-b').hide()
25                         })
26                     }
27                 }
28             })
29         }
30         // 点击其他元素隐藏该元素
31         document.onclick = function () {
32             $('.sel-b').hide()
33         }
34         // 展开下拉
35         $(".sel .sel-t").click(function (e) {
36             getperson()
37             $('.sel-b').find('input').val('')
38             stopFunc(e);
39             $(this).siblings(".sel-b").slideToggle()
40         })
41         // 防止中文搜索时失去焦点
42         $('.sel-b').click(function(e){
43             stopFunc(e);
44         })
45         // 阻止向上冒泡
46         function stopFunc(e) { 
47             e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
48         }