帶搜尋框的下拉選擇
阿新 • • 發佈:2022-03-25
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")}', 8type:'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 }