测试

h5pay/newPay/css/index.css

@@ -374,6 +374,15 @@
   top: 0.5rem;
   left: 0.65rem;
 }
+.search-no-li {
+  color: #fff;
+  font-size: 0.35rem;
+  width: 10rem;
+  text-align: center;
+  position: absolute;
+  top: 3rem;
+  display: none;
+}
 .area-ul {
   width: 10rem;
   height: 9.7rem;

h5pay/newPay/css/index.less

@@ -382,6 +382,15 @@
     left: 0.65rem;
   }
 }
+.search-no-li{
+  color: #fff;
+  font-size: 0.35rem;
+  width: 10rem;
+  text-align: center;
+  position: absolute;
+  top: 3rem;
+  display: none;
+}
 .area-ul{
   width: 10rem;
   height: 9.7rem;

h5pay/newPay/index.html

@@ -137,6 +137,9 @@
         <li><img src="images/area-icon.png">中國</li>
         <li><img src="images/area-icon.png">中國</li> -->
     </ul>
+	<div class="search-no-li">
+		暫無該國家地區
+	</div>
 </div>
 <div class="alipay"></div>
 <div class="gash"></div>
@@ -483,8 +486,8 @@ $(function(){
                 var html=[];
                 for(var i=0;i<data.countryList.length;i++){
                     var list=data.countryList[i]
-                    if(sessionStorage.countryCode==list.countryCode)html+='<li data-type="'+list.countryCode+'" class="area-li-click"><img src="images/area-icon.png"><span>'+list.countryShowName+'</span><i class="countryCode">'+list.countryCode+'</i></li>'
-                    else html+='<li data-type="'+list.countryCode+'"><img src="images/area-icon.png"><span>'+list.countryShowName+'</span><i class="countryCode">'+list.countryCode+'</i></li>'
+                    if(sessionStorage.countryCode==list.countryCode)html+='<li data-type="'+list.countryCode+'" class="area-li-click"><img src="images/area-icon.png"><span class="countryShowName">'+list.countryShowName+'</span><i class="countryCode">'+list.countryCode+'</i></li>'
+                    else html+='<li data-type="'+list.countryCode+'"><img src="images/area-icon.png"><span class="countryShowName">'+list.countryShowName+'</span><i class="countryCode">'+list.countryCode+'</i></li>'
                 }
                 $(".area-ul").html(html)
                 $(".area-ul li").unbind("click").on("click",function(){
@@ -492,9 +495,31 @@ $(function(){
                     sessionStorage.countryName=_self.children("span").text()
                     getPayInfo(_self.attr("data-type"))
                     $(".layer-shadow").fadeOut(200)
-                
+					$(".area-search-box input").val('')
                     $(".layer-area-box").css("bottom","-12.4rem")
                 })
+				$(".area-search-box input").unbind("input").on("input",function(){
+					searchNum=0
+					$(".area-ul").find('.countryShowName').each(function() {
+						var text1 = $(this)[0].innerHTML;
+						if(text1.toLowerCase().indexOf($(".area-search-box input").val().toLowerCase())>=0){
+        				    $(this).parent().css("display","block")
+        				    searchNum++
+        				}else{
+        				    $(this).parent().css("display","none")
+        				}
+					})
+					$(".area-ul").find('.countryCode').each(function() {
+						var text1 = $(this)[0].innerHTML;
+        				if(text1.toLowerCase().indexOf($(".area-search-box input").val().toLowerCase())>=0){
+        				    $(this).parent().css("display","block")
+        				    searchNum++
+        				}
+        				if(searchNum==0){
+        				    $(".search-no-li").show()
+        				}else $(".search-no-li").hide()
+					})
+				})
     		}
     	})
     }