能满足基础使用

script.js

@@ -464,6 +464,29 @@ function initialize()
 		controlBox.classList.remove("blur-bg");
 	}
 
+	//创建一个新的怪物头像
+	editBox.createCardHead = function(id)
+	{
+		function clickHeadToNewMon()
+		{
+			monstersID.value = this.getAttribute("data-cardid");
+			monstersID.onchange();
+			return false;
+		}
+		const cli = document.createElement("li");
+		const cdom = cli.head = cli.appendChild(document.createElement("a"));
+		cdom.class = "monster";
+		cdom.onclick = clickHeadToNewMon;
+		const property = cdom.appendChild(document.createElement("div"));
+		property.className = "property";
+		const subproperty = cdom.appendChild(document.createElement("div"));
+		subproperty.className = "subproperty";
+		const cid = cdom.appendChild(document.createElement("div"));
+		cid.className = "id";
+		changeid({id:id},cdom);
+		return cli;
+	}
+
 	const searchBox = editBox.querySelector(".search-box");
 	let s_attr1s = Array.prototype.slice.call(searchBox.querySelectorAll(".attrs .attr-list-1 .attr-radio"));
 	let s_attr2s = Array.prototype.slice.call(searchBox.querySelectorAll(".attrs .attr-list-2 .attr-radio"));
@@ -512,6 +535,7 @@ function initialize()
 	const searchStart = searchBox.querySelector(".control-div .search-start");
 	const searchClose = searchBox.querySelector(".control-div .search-close");
 	const searchClear = searchBox.querySelector(".control-div .search-clear");
+	const searchMonList = searchBox.querySelector(".search-mon-list");
 	function returnCheckedInput(ipt)
 	{
 		return ipt.checked == true;
@@ -552,10 +576,25 @@ function initialize()
 		const typesFilter = s_types.filter(returnCheckedInput).map(returnInputValue).map(Str2Int);
 		const sawokensFilter = s_sawokens.filter(returnCheckedInput).map(returnInputValue).map(Str2Int);
 		const awokensFilter = s_awokensCount.filter(btn=>{return parseInt(btn.innerHTML,10)>0;}).map(btn=>{
-			return [parseInt(btn.value,10),parseInt(btn.innerHTML,10)];
+			return {id:parseInt(btn.value,10),num:parseInt(btn.innerHTML,10)};
 		});
+		console.log("搜索条件",attr1,attr2,fixMainColor,typesFilter,awokensFilter,sawokensFilter);
 		let searchResult = searchCards(Cards,attr1,attr2,fixMainColor,typesFilter,awokensFilter,sawokensFilter);
-		//console.log(Cards,attr1,attr2,fixMainColor,typesFilter,awokensFilter,sawokensFilter)
+		console.log("搜索结果",searchResult);
+		const createCardHead = editBox.createCardHead;
+
+		searchMonList.classList.add("display-none");
+		searchMonList.innerHTML = "";
+		if (searchResult.length>1)
+		{
+			let fragment = document.createDocumentFragment(); //创建节点用的临时空间
+			searchResult.forEach(function(card){
+				const cli = createCardHead(card.id);
+				fragment.appendChild(cli);
+			});
+			searchMonList.appendChild(fragment);
+		}
+		searchMonList.classList.remove("display-none");
 	}
 
 	searchClose.onclick = ()=>{
@@ -576,6 +615,7 @@ function initialize()
 		s_sawokens.forEach(t=>{
 			t.checked = false;
 		});
+		searchMonList.innerHTML = "";
 	}
 	const settingBox = editBox.querySelector(".setting-box")
 	const searchOpen = settingBox.querySelector(".row-mon-id .open-search");
@@ -1305,28 +1345,7 @@ function editBoxChangeMonId(id)
 		return m.evoRootId == card.evoRootId;
 	}).map(function(m){return m.id;}); //筛选出相同进化链的
 
-	//创建一个新的怪物头像
-	function createCardHead(id)
-	{
-		function clickHeadToNewMon()
-		{
-			monstersID.value = this.getAttribute("data-cardid");
-			monstersID.onchange();
-			return false;
-		}
-		const cli = document.createElement("li");
-		const cdom = cli.head = cli.appendChild(document.createElement("a"));
-		cdom.class = "monster";
-		cdom.onclick = clickHeadToNewMon;
-		const property = cdom.appendChild(document.createElement("div"));
-		property.className = "property";
-		const subproperty = cdom.appendChild(document.createElement("div"));
-		subproperty.className = "subproperty";
-		const cid = cdom.appendChild(document.createElement("div"));
-		cid.className = "id";
-		changeid({id:id},cdom);
-		return cli;
-	}
+	const createCardHead = editBox.createCardHead;
 	if (evoLinkCardsIdArray.length>1)
 	{
 		let fragment = document.createDocumentFragment(); //创建节点用的临时空间

solo.html

@@ -359,7 +359,7 @@ var formation = new Formation(1,6);
 		</div>
 		<div class="detail-box"><textarea class="detail" placeholder="输入说明"></textarea></div>
 	</div>
-	<div class="edit-box"><!--display-none-->
+	<div class="edit-box display-none"><!--display-none-->
 		<div class="edit-box-title"><!--修改怪物--></div>
 		<div class="monsterinfo-box">
 			<div class="monster-head">
@@ -377,7 +377,7 @@ var formation = new Formation(1,6);
 				<li class="type-name"><div class="type-icon"></div></li>
 			</ul>
 		</div>
-		<div class="search-box">
+		<div class="search-box display-none">
 			<div class="attrs"><!--属性-->
 				<ul class="attr-list attr-list-1">
 					<li><input type="radio" name="attr-1" class="attr-radio" value="all" id="search-attr-1-all" /><label class="attr-all" for="search-attr-1-all"><!--全部--></label></li>

style.css

@@ -12,9 +12,7 @@
 
 body{
 	font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif;
-	--search-list-title-width: 50px;
-	--search-list-title-font-size: 16px;
-	--search-icon-unchecked: 0.3;
+	--search-icon-unchecked: 0.4;
 }
 .display-none{
 	display:none !important;
@@ -452,18 +450,21 @@ ul{
 	height: 40px;
 	font-size: 25px;
 }
-.edit-box .setting-box .row-mon-id .evo-card-list li{
+.edit-box .setting-box .row-mon-id .evo-card-list li,
+.edit-box .search-box .search-mon-list li{
 	display: inline-block;
 	vertical-align: top; 
 	top: 0;
-	width: 75px;
-	height: 75px;
+	width: 78px;
+	height: 80px;
 }
-.edit-box .setting-box .row-mon-id .evo-card-list .monster{
+.edit-box .setting-box .row-mon-id .evo-card-list .monster,
+.edit-box .search-box .search-mon-list .monster{
 	float: none;
 	transform: scale(0.75) translate(-13px,-13px);
 }
-.edit-box .setting-box .row-mon-id .evo-card-list .monster .id{
+.edit-box .setting-box .row-mon-id .evo-card-list .monster .id,
+.edit-box .search-box .search-mon-list .monster .id{
 	bottom: 5px;
 	font-size: 20px;
 }
@@ -621,6 +622,8 @@ ul{
 
 .search-box .search-mon-list{
 	border: 1px solid white;
+	border-radius: 5px;
+	background: grey;
 }
 .setting-box .row-mon-id .open-search{
 	float: right;
@@ -721,7 +724,7 @@ ul{
 	cursor: pointer;
 }
 .awoken-ul .awoken-icon.unselected-awoken{
-	opacity: 0.3;
+	opacity: var(--search-icon-unchecked);
 }
 .row-mon-awoken .awoken-icon.awoken-count,
 .row-mon-awoken .awoken-icon.awoken-count.full-awoken::before
@@ -829,7 +832,7 @@ ul{
 }
 .m-latent-allowable-ul .latent-icon.unselected-latent{
 	cursor: default;
-	opacity: 0.3;
+	opacity: var(--search-icon-unchecked);
 }
 
 

universal_function.js

@@ -210,5 +210,41 @@ function calculateAbility(monid = 0,level = 1,plus = [0,0,0],awoken = 0,latent =
 }
 function searchCards(cards,attr1,attr2,fixMainColor,types,awokens,sawokens)
 {
-
+	let res = cards;
+	if (fixMainColor || attr2 == -1) //如果固定了顺序，或者副属性选的是无
+	{
+		if (attr1 != null)
+		{
+			res = res.filter(c=>{return c.attrs[0] == attr1;})
+		}
+		if (attr2 != null)
+		{
+			res = res.filter(c=>{return c.attrs[1] == attr2;})
+		}
+	}else
+	{
+		if (attr1 != null)
+		{
+			res = res.filter(c=>{return c.attrs.indexOf(attr1)>=0;})
+		}
+		if (attr2 != null)
+		{
+			res = res.filter(c=>{return c.attrs.indexOf(attr2)>=0;})
+		}
+	}
+	if (types.length>0)
+	{
+		res = res.filter(c=>{return  types.some(t=>{return c.types.indexOf(t)>=0});})
+	}
+	if (awokens.length>0)
+	{
+		res = res.filter(c=>{return  awokens.every(a=>{
+			return c.awakenings.filter(ca=>{return ca == a.id}).length >= a.num;
+		});});
+	}
+	if (sawokens.length>0)
+	{
+		res = res.filter(c=>{return  sawokens.some(sa=>{return c.superAwakenings.indexOf(sa)>=0});})
+	}
+	return res;
 }