1. 程式人生 > 其它 >帶搜尋框的下拉選擇

帶搜尋框的下拉選擇

 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 }