调整

assets/js/company-postproject.js

@@ -1,7 +1,34 @@
 $(function(){
 	
  	  $(document).ready(function () {
-		
+		  var companyList=["CompanyAAA","CompanyBBB","CompanyCCC"]
+		  
+			$(".ulboxinput").on('input propertychange',(function(){
+				var value=$(this).val()
+				if(value!=""){
+					$(".ulbox").empty()
+					
+					var clist=companyList.filter(function(item){
+						if(item.indexOf(value)>-1){
+							var li=$("<li>"+item+"</li>")
+							$(".ulbox").append(li);
+							return true
+						}else{
+							return false
+						}
+					})
+					if(clist.length){
+						$(".ulbox").show()
+					}else{
+						
+						var li=$("<li>测试数据 CompanyAAA CompanyBBB CompanyCCC</li>")
+						$(".ulbox").append(li);
+						$(".ulbox").show()
+					}
+				}else{
+					$(".ulbox").hide()
+				}
+			}))
 		
 		  $(".btnUpload").height($(".btnUpload").width()) 
 		  	var getspan=$(".imguploadspan").html();

assets/js/company_main.js

@@ -1,5 +1,147 @@
+var selectLocation = ["Canada", "China", "France", "Germany"];
+var selectLocation2 = ["China"];
 $(function(){
 	
+	$(".dropdown").mouseover(function () {
+	    $(this).addClass("open");
+	});
+	
+	$(".dropdown").mouseleave(function(){
+	    $(this).removeClass("open");
+	})
+	
+	var selectDisciplines = [" Masterplanning"," Architecture"," Interiors", "Lighting"," Landscape"," AV & Acoustics"," MEP"," Art work & Accessories"," Graphics & Signage"," Branding"," Furniture, Lighting"];
+	
+	var newestList = window.localStorage.getItem("newestList")
+	
+	
+	var resentlist = window.localStorage.getItem("resentlist")
+	var trendinglist = [
+		"Interior", "Architecture", "Masterplanning", "Lighting", "Landscape", "Acoustics", "MEP",
+		"Art work & Accessories",
+	]
+	if(newestList==null){
+		newestList=[...selectDisciplines]
+		window.localStorage.setItem("newestList", JSON.stringify(newestList))
+		
+	}else{
+		newestList = JSON.parse(newestList)
+	}
+	
+	addlistNewest(".newest-list-pro",newestList)
+	
+	addlistBtn(".trendinglist", trendinglist)
+	if (resentlist) {
+		resentlist = JSON.parse(resentlist)
+		addlistBtn(".resentlist", resentlist)
+	} else {
+		resentlist = []
+	}
+	
+	
+	$(".newest-list-pro").on("click", '.newest-item-x', function() {
+		var name=$(this).parent().find(".query").text()
+		
+		var k2=newestList.indexOf(name)
+		
+		if (k2 != -1) {
+			newestList.splice(k2, 1)
+		}
+		
+		window.localStorage.setItem("newestList", JSON.stringify(newestList))
+		
+		$(this).parent().remove()
+	})
+	$(".search-item").on("click", '.querybtnli', function() {
+	
+		var value = $(this).text()
+		$(".landingpage_search").val(value);
+		$(".querybtn").click()
+	})
+	$(".querybtn").click(function() {
+		resentlistAdd($(".landingpage_search").val())
+	})
+	$(".querybtn2").click(function() {	
+		resentlistAdd($(".landingpage_search").val())
+	})
+	
+	
+	function resentlistAdd(name) {
+	
+		if (name) {
+			var k = resentlist.indexOf(name)
+			var k2=newestList.indexOf(name)
+			
+			if (k != -1) {
+				 resentlist.splice(k, 1)
+			}
+			if (k2 != -1) {
+				newestList.splice(k2, 1)
+			}
+			var i = resentlist.unshift(name)
+			  newestList.unshift(name)
+			
+			var num = 4
+			if (i > num) {
+				resentlist = resentlist.slice(0, num)
+			}
+			window.localStorage.setItem("resentlist", JSON.stringify(resentlist))
+			window.localStorage.setItem("newestList", JSON.stringify(newestList))
+	
+		}
+		addlistNewest(".newest-list-pro",newestList)
+		addlistBtn(".resentlist", resentlist)
+		$("#project-photo-row").empty();
+	
+		$.getJSON("../../assets/js/landingpage_photos.json", function(data) {
+			data = data.sort(() => {
+				return Math.random() > 0.5 ? -1 : 1
+			})
+			const tmphtml = template("flow-photos", {
+				photos: data
+			});
+	
+			$("#project-photo-row").append(tmphtml);
+		});
+	}
+	addlistSelect(".selectDisciplines", selectDisciplines)
+	addlistSelect(".selectLocation", selectLocation)
+	
+	
+	function addlistNewest(name, list) {
+		$(name).empty()
+		list.forEach(function(item) {
+				
+			var btn = $('<div class="newest-item "> <span class="query">' + item + '</span><span class="newest-item-x" >x</span></div>')
+	
+			$(name).append(btn)
+		})
+	}
+	function addlistBtn(name, list) {
+		$(name).empty()
+		list.forEach(function(item) {
+			var btn = $('<button class="btn btn-lg  querybtnli">' + item + '</button>')
+	
+			$(name).append(btn)
+		})
+	}
+	$(".query").click(function() {
+		
+		resentlistAdd($(this).text())
+	
+	})
+	
+	$('.selectpicker').selectpicker({
+		template: {
+			caret: '<span class="sel-icon glyphicon glyphicon-menu-down"></span>'
+		}
+	});
+	
+	$('#filter-select').on('changed.bs.select', function (e, clickedIndex, isSelected, prestate,currentVal) {
+	   
+	 
+	});
+	
 	var look =(window.location.search?0:1)
 	$.getJSON("../../assets/js/landingpage_photos.json", function (data) {
 	
@@ -36,4 +178,32 @@ $(function(){
 	$(".contact-btn").on("click",function(){
 		window.open("../company/company_contact.html");
 	});
-});
+	
+	//trigger search by enter
+	$(".landingpage_search").on("keyup",function(event){
+		var e = event || window.event;
+		if(e && e.keyCode==13 && this.value.length>0){ 
+			resentlistAdd($(".landingpage_search").val());
+		}
+	});
+});
+
+function selectOnchang(obj){ 
+	console.log(obj.selectedIndex)
+	if(obj.selectedIndex==1){
+		addlistSelect(".selectpicker.selectLocation", selectLocation2)
+		
+	}else{
+		addlistSelect(".selectpicker.selectLocation", selectLocation)
+		
+	}
+	$(".selectpicker.selectLocation").selectpicker('refresh');
+}
+function addlistSelect(name, list) {
+		$(name).empty()
+		list.forEach(function(item) {
+			var btn = $('<option>' + item + '</option>')
+
+			$(name).append(btn)
+		})
+	}

html/company/company_main.html

@@ -6,7 +6,10 @@
 		<script src="../../js/jquery-1.9.1.min.js"></script>
 		<script src="../../js/jquery.i18n.properties.js"></script>
 		<script src="../../assets/js/language.js"></script>
+		
 		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" rel="stylesheet">
+		<link rel="stylesheet" type="text/css" href="../../assets/plugin/bootstrap-select/css/bootstrap-select.css"/>
+		
 		<link rel="stylesheet" type="text/css" href="../../assets/plugin/zeroModal/css/normalize.css" />
 		<style type="text/css">
 			.top{
@@ -52,8 +55,26 @@
 						   margin:0px 40px 0px 0px;
 						   color:#999;
 						   cursor: pointer;
+						   white-space: nowrap;
 			}
+			.newest-list .newest-item .query{
+						   font-size:16px;
+						}  
 			
+			.search-list .search-item{
+						   margin-right: 10px;
+			}
+			
+			 .search-list .search-item label{
+							display: block;
+						}
+			
+			.dropdown button{
+						    display: flex;
+						    flex-flow: row nowrap;
+						    justify-content: flex-start;
+						    align-items: center;
+			}
 			.contact-box{
 				padding:20px 20px 5px 20px;
 				display: flex;
@@ -83,6 +104,27 @@
 			    width:242px; /*宽度根据实际情况调节，应与上面一致*/
 			    overflow:auto; /*防止内容溢出导致布局错位*/
 			}
+			.bootstrap-select > .dropdown-toggle {
+						    padding-top:10px;
+						    padding-bottom: 10px;
+							padding-right: 32px;
+						}
+						.search-list .search-item .sel-icon,.newest-list .sel-icon{
+							position: absolute;
+							top: 50%;
+							right: 10px;
+							margin-top: -7px;
+							vertical-align: middle;
+						}
+						.filter-menu .dropdown-toggle{
+							border:0px !important;
+							outline: 0px !important;
+							background-color: #ffffff !important;
+						}
+						.filter-menu .dropdown-toggle:focus{
+							outline: 0px !important;
+						}
+						.my-select{width:280px !important;}
 		</style>
 	</head>
 	<body>
@@ -97,27 +139,140 @@
 		</script>
 		<main class="jpmain">
 		<div class="container-fluid" style="padding:0;">
-			<!-- <div class="top">
-				<div class="top-item">
-					<img  src="../../assets/img/head_logo.png"/>
-				</div>
-				<div class="top-item top-item-active">
-					<span>LIBRARY</span>
-				</div>
-				<div class="top-item">
-					<span>MOMENTS</span>
-				</div>
-				<div class="top-item" style="flex:1;"></div>
-				<div class="top-item">
-					<img src="../../assets/img/head_icon_language.png"><span>&nbsp;&nbsp;English</span>
-				</div>
-				<div class="top-item us-name-item">
-					<span>Sign in / Sign up</span>
+			<div class="tool-box">
+			
+				
+				<div class="search-list" >
+					<div class="search-item">
+						<label class="i18n-text"  i18n="landingpage_SearchBy"></label>
+						<select class="selectpicker" onchange="selectOnchang(this)">
+						  <option class="i18n-text"  i18n="landingpage_By project" >By project</option>
+						  <option class="i18n-text"  i18n="landingpage_By company">By company</option>
+						</select>
+						
+					</div>
+					
+					<div class="search-item">
+						<label class="i18n-text"  i18n="landingpage_Location"></label>
+						<select class="selectpicker selectLocation" multiple>
+						  
+						</select>
+						
+					</div>
+					
+					
+					
+					<div class="search-item">
+						<label class="i18n-text"  i18n="landingpage_Disciplines"  >Disciplines</label>
+						<select class="selectpicker my-select selectDisciplines" multiple>
+						 
+						</select>
+					</div>
+					
+					
+					<div class="search-item">
+						 <label style="display: block;">&nbsp;</label>
+						 <button type="button" class="btn btn-default i18n-text querybtn2" i18n="head_Submit" style="height: 42px;padding:0px 20px;background-color: #000000;color:#ffffff;border-radius: 8px;">Submit</button>
+					</div>
+					
+					<div style="flex:1;"></div>
+					
+					<div class="search-item">
+						<label style="display: block;">&nbsp;</label>
+						
+					
+						<div class="input-group">
+						  <input type="text"  class="form-control i18n-placeholder landingpage_search"  data-toggle="dropdown"
+						  i18n="landingpage_search" placeholder="Key words" aria-describedby="basic-addon2" style="height:42px;    width: 220px;">
+						  <span class="input-group-addon" style="
+									padding: 0px;
+								" id="basic-addon2">
+							  <button type="button" class="querybtn" style="    width: 50px;
+									height: 40px; border: 0;">
+								    <i class="glyphicon glyphicon-search query"></i>
+							  </button>
+							
+							  </span>
+							  <style>
+							  .filterstyle{
+								    padding: 20px;
+								      width: 460px;
+									
+							  }
+							  .filterstyle span{
+								    padding: 10px;
+							  		    display: block;
+							  		    overflow-wrap: break-word;
+							  		    color: rgba(24, 24, 24, 1);
+							  		    font-size: 14px;
+							  		    font-family: Avenir-Roman;
+							  		    white-space: nowrap;
+							  		    line-height: 19px;
+							  		    text-align: left;
+							  }
+							  .filterstyle button{
+								    margin: 5px;
+							  		         padding: 5px 16px;
+										       font-size: 14px;
+											       color: rgba(130, 130, 130, 1);
+							  }
+							  </style>
+							  
+							  <ul class="dropdown-menu dropdown-menu-right filter-menu filterstyle" aria-labelledby="dropdownMenu1">
+							       <li>
+									    <span  class="i18n-text" i18n="landingpage_Resent searches">Resent searches</span>
+										<div class="resentlist">
+										</div>
+										
+							  		 </li>
+							      <li>
+							      		 <span class="i18n-text" i18n="landingpage_Trending searches">Trending searches</span>
+							      			<div class="trendinglist">
+							      			</div>
+							      	</li>
+							  </ul>
+						</div>
+					</div>
+					
 				</div>
-				<div class="top-item">
-					<img  src="../../assets/img/head_add.png" style="height: 40px;">
+				<style>
+					.newest-list-pro {
+						    display: flex;
+						    overflow: hidden;
+					}
+					.newest-item-x {
+						/* display: none; */
+						position: relative;
+						top: -5px;
+						margin-left: 5px;
+						 font-size: 5px;
+					}
+					/* .newest-item:hover .newest-item-x{
+						display: inline-flex;
+					} */
+				</style>
+				
+				<div class="newest-list" style="margin-top:30px;">
+					<div style="margin-right:15px;">
+						<select class="selectpicker filter-menu" data-width="100px" id="filter-select">
+						  <option class="i18n-text" i18n="landingpage_filter_newest">Newest</option>
+						  <option class="i18n-text" i18n="landingpage_filter_popular">Popular</option>
+						  <option class="i18n-text" i18n="landingpage_filter_clicked">Clicked</option>
+						</select>
+					</div>
+					
+					
+					<div class="newest-list-pro ">
+					
+					</div>
+					
+					
+					<div style="flex:1;"></div>
+					<div class="newest-item" style=" margin-left: 30px;">
+						<img src="../../assets/img/landing_right_arrow.png"></div>
 				</div>
-			</div> -->
+				
+			</div>
 			
 			<div class="contact-box">
 				<img src="../../assets/img/contact_icon.png">
@@ -131,23 +286,7 @@
 				<button type="button" class="btn btn-default contact-btn  i18n-text" i18n="landingpage_Contact us" style="height: 42px;background-color: #000000;color: #fff;padding:0px 20px;">Contact us</button>
 			</div>
 			
-			<div class="tool-box">
-				<div class="newest-list">
-					<div class="newest-item  i18n-text" i18n="landingpage_Newest" style="color:#000000;font-weight: bold;cursor: default;">Newest</div>
-					<div class="newest-item query">All</div>
-					<div class="newest-item query">x &nbsp;Masterplanning</div>
-					<div class="newest-item query">Architecture</div>
-					<div class="newest-item query">Interiors</div>
-					<div class="newest-item query">Lighting</div>
-					<div class="newest-item query">Landscape</div>
-					<div class="newest-item query">AV&nbsp;&amp;&nbsp;Acoustics</div>
-					<div class="newest-item query">MEP</div>
-					<div class="newest-item query">Landscape</div>
-					<div class="newest-item query">Landscape</div>
-					<div style="flex:1;"></div>
-					<div class="newest-item"><img src="../../assets/img/landing_right_arrow.png"></div>
-				</div>
-			</div>
+		
 			
 			<div class="project-box">
 				<div class="row">
@@ -168,6 +307,8 @@
 		<script src="../../js/bootstrap.min.js"></script>
 		<script src="../../assets/js/company_main.js"></script>
 		<script src="../../assets/plugin/template-web.js"></script>
+		<script src="../../assets/plugin/bootstrap-select/js/bootstrap-select.js"></script>
+		
 		<style>
 			.imgoption {
 				height:  0px;

html/company/postproject.html

@@ -241,13 +241,43 @@
 											
 										</dd>
 									</div>
-									<div class="span6">
+									<div class="span6">
+										 <style type="text/css">
+											.ulbox{
+													position: absolute;
+													display: none;
+												    float: left;
+												    min-width: 160px;
+												    padding: 5px 0;
+												    margin: 2px 0 0;
+												    font-size: 14px;
+												    text-align: left;
+												    list-style: none;
+												    background-color: #fff;
+												    background-clip: padding-box;
+												    border: 1px solid #ccc;
+												    border: 1px solid rgba(0,0,0,.15);
+												    border-radius: 4px;
+												    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+												    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+											}
+											.ulbox li{
+												margin-left: 20px ;
+												margin-right: 20px ;
+												margin-top: 5px ;
+											}
+										</style>
 										<dt class="jph3 i18n-text" i18n="company_postproject_Affiliates name">
 											Affiliates name
 										</dt>
 										<dd>
-												<input  required name="Affiliates"  type="text"  placeholder="" />
-										</dd>
+												<input  required name="Affiliates" class="ulboxinput" autocomplete=“off”    type="text"  placeholder="" />
+												<ul class="ulbox" >
+												
+												</ul>
+																					
+										</dd>
+										
 									</div>
 								</div>
 								

html/head.html

@@ -96,7 +96,7 @@
 										
 										
 										<li>
-											<a href="../lanhu/index.html" class="i18n-text" i18n="headcommon3">My posts</a>
+											<a href="../company/company_main.html" class="i18n-text" i18n="headcommon3">My posts</a>
 										</li>
 										<li>
 											<a href="../moments/index.html" class="i18n-text" i18n="headcommon4">My moments</a>

html/moments/index.html

@@ -90,7 +90,7 @@
 				padding-right: 32px;
 			}
 
-			.search-list .search-item .sel-icon {
+			.search-list .search-item .sel-icon,.newest-list .sel-icon{
 				position: absolute;
 				top: 50%;
 				right: 10px;
@@ -161,9 +161,17 @@
 						}
 					</style>
 					
-					<div class="newest-list" style="flex:1;overflow:hidden;">
-						<div class="newest-item i18n-text" i18n="landingpage_Newest"
+					<div class="newest-list" style="flex:1;">
+						<!-- <div class="newest-item i18n-text" i18n="landingpage_Newest"
 						 style="color:#000000;font-weight: bold;cursor: default;">Newest</div>
+						 -->
+						<div style="margin-right:15px;">
+							<select class="selectpicker filter-menu" data-width="100px" id="filter-select">
+							  <option class="i18n-text" i18n="landingpage_filter_newest">Newest</option>
+							  <option class="i18n-text" i18n="landingpage_filter_popular">Popular</option>
+							  <option class="i18n-text" i18n="landingpage_filter_clicked">Clicked</option>
+							</select>
+						</div>
 						
 						
 						<div class="newest-list-pro ">
@@ -241,7 +249,15 @@
 				<div class="row-fluid  jpcontainer">
 					<div class="span12">
 						
-						<style>
+						<style>
+						.filter-menu .dropdown-toggle{
+							border:0px !important;
+							outline: 0px !important;
+							background-color: #ffffff !important;
+						}
+						.filter-menu .dropdown-toggle:focus{
+							outline: 0px !important;
+						}
 						.main4{
 							width: 100%;
 							    height: 8px;

html/moments/postmoment.html

@@ -25,7 +25,7 @@
 			$(function() {
 				$("#head").load("../head.html",function(){
 					$("#common-navbar-head .active").removeClass("active")
-					$("#common-navbar-head .head_li_user").addClass("active")
+					//$("#common-navbar-head .head_li_user").addClass("active")
 					$(".head_li_Moments").addClass("active")
 				});
 			})