http://codepen.io/scomiller/pen/jEQEdX
#suggestions {
font: bold 14px/25px 'lucida sans', 'trebuchet MS', 'Tahoma';
float: right;
width: 300px;
margin-top: -55px;
margin-right: 460px;
padding: 5px;
background-color: #EEE;
box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
}
如图所示，我有一个搜索框，当您以C开头输入内容时，例如CIS实验室或CIS，只会在右侧显示一系列建议。如果你注意到，后面有一个灰色框，它会调整列出的内容大小，但是，当搜索框被清除或只是空的时候，那里还有一个小盒子。如果建议目前没有活动，我怎么能这样做，没有背景？
答案 0 :(得分：0)
使用:empty
#suggestion {
display: none;
}
#suggestions:not(:empty) {
display: block;
}
答案 1 :(得分：0)
您可以使用:empty伪类：
#suggestions:empty {
display: none;
}
要使其有效，您必须删除#suggestions中的所有内容（包括空格）：
<div id="suggestions"></div>
var hints = ["c#",
"c++",
"call by copy",
"call by name",
"call by reference",
"career",
"carlson",
"cascading style sheet",
"case",
"catch",
"c++ book",
"c++ class",
"c++ classes",
"c++ compiler",
"c++ debugger",
"c++ documentation",
"cellpadding",
"cell padding",
"cellspacing",
"cell spacing",
"certification",
"c++ exception",
"c++ function",
"c++ programming",
"char",
"character array",
"choice",
"cin",
"cis",
"cis alumni",
"cis assessment",
"cis class schedule",
"cis course descriptions",
"cis courses",
"cis course schedule",
"cis department",
"cis department chairperson",
"cis department faculty",
"cisdept",
"cis dept",
"cis dept faculty",
"cis dept policies",
"cis faculty",
"cis lab",
"cis lab hours",
"cis lab information",
"cis lab schedule",
"cis major",
"cis minor",
"cis tutors",
"class",
"classes",
"class function",
"class schedule",
"click handler",
"close",
"clp",
"c++ object",
"c++ objects",
"c-string",
"code reuse",
"coding",
"coding error",
"color",
"command line argument",
"comment",
"comparison",
"compound condition",
"computer",
"computer and network security",
"computer architecture",
"computer architecture and operating systems",
"computer organization",
"computer science",
"computer science project",
"computer science concentration",
"computer security",
"computing",
"computing and information science",
"computing and information science major",
"computing career",
"computing department",
"computing dept",
"computing faculty",
"computing home page",
"computing jobs",
"computing major",
"computing science project",
"condition",
"const",
"constant",
"constant function",
"constructor",
"container class",
"conversion",
"cookie",
"copy constructor",
"count",
"count-controlled loop",
"course",
"course descriptions",
"course schedule",
"cout",
"c++ pointer",
"c++ program",
"c++ programming",
"cs concentration",
"css",
"c++ stream",
"c style string",
"c-style string",
"ctrl z",
"c++ tutorial",
"curriculum"
];
function suggest(str) {
var currentHint, location, temp;
var domSuggestions = document.getElementById("suggestions"); // Get a reference to the div whose id is suggestions.
cleanup();
for (k = 0; k < hints.length; k++) {
currentHint = hints[k]; // Get the string at index k in the hints array.
if (isPrefix(str, currentHint)) // Call isPrefix on str and currentHint to see if the letters of str match the beginning of currentHint.
{
temp = '<a onclick="useSuggestion(' + k + ')" >' + currentHint + '</a><br />';
domSuggestions.innerHTML = domSuggestions.innerHTML + temp; // Adds a clickable word or phrase to the innerHTML of the div.
}
}
if (str == "") {
cleanup();
}
}
function isPrefix(s, hint) {
var k;
var sLen = s.length;
var hintLen = hint.length;
if (sLen > hintLen)
return false;
s = s.toLowerCase();
for (k = 0; k < sLen; k++) {
if (s[k] != hint[k]) {
return false;
}
}
return true; // All of s matched the start of hint.
}
function cleanup() {
var domSuggestions = document.getElementById("suggestions");
domSuggestions.innerHTML = ""; // Put the empty string in as the innerHTML of the div whose id is suggestions.
}
function useSuggestion(hint) {
document.getElementById("Key1").value = hints[hint]; // Put hints[hint] in as the value of the input text box whose id is Key1.
}
function validate(thisform) {
cleanup();
if (thisform.Key1.value == "") {
alert("No keyword or phrase was entered. Please try again.");
return false;
} else
return true;
}/*Header text syling*/
h2 {
margin-top: 35px;
background-color: #85D0FF;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
font: bold 25px/40px'lucida sans', 'trebuchet MS', 'Tahoma';
text-transform: uppercase;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
color: white;
padding: 4px;
}
.title {
margin-left: 400px;
}
/*Search information/directions styling*/
ul {
margin-top: 35px;
font: 13px/17px'lucida sans', 'trebuchet MS', 'Tahoma';
opacity: 0.6;
list-style-type: square;
}
/*Optional hiding/opacity change for above directions*/
/*ul:hover {
opacity: 0.9;
}*/
/*Search box styling*/
.searchbox {
margin-top: 20px;
width: 335px;
height: 10px;
padding: 10px 5px;
}
/*Location and styling of the pop-up suggestions*/
#suggestions {
font: bold 14px/25px'lucida sans', 'trebuchet MS', 'Tahoma';
float: right;
width: 300px;
margin-top: -55px;
margin-right: 460px;
padding: 5px;
background-color: #EEE;
box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
}
#suggestions:empty {
display: none;
}
/*Styling and transformation of the suggestions pre-hover*/
a {
background-color: #85D0FF;
opacity: 0.5;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
/*Styling and transformation of the suggestions during cursor hover*/
a:hover {
opacity: 1;
background-color: #FFFFFF;
cursor: pointer;
margin-left: 5px;
text-transform: uppercase;
font-size: 100%;
}
/*Adds content to the beginning of a suggestion during mouse-over*/
a:hover:before {
content: '';
font-weight: bold;
font-size: 75%;
}
/*Header style*/
h2 {
opacity: 0.8;
}
/*Search and Clear button styling*/
.button {
margin-top: -5px;
/*This margin works best with search autocomplete turned off*/
font: bold 14px/40px'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #8A8A8A;
opacity: 0.8;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
float: absolute;
height: 30px;
width: 63px;
border: 0px;
padding: 0px;
line-height: 20px;
/*Aligns text in center of button*/
}
/*Search and Clear button hover styling*/
.button:hover {
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
zoom: 1.05;
}
.footer {
text-transform: capitalize;
text-decoration: none;
color: #000000;
background-color: #FFFFFF;
}
/*Footer styling (mainly for the Br. David Carlson link*/
.footer:hover {
text-transform: capitalize;
text-decoration: none;
background-color: #FFFFFF;
color: #000000;
}<h2>CIS Department Search</h2>
<ul>
<li>The search term you put in the input box below can be a word or phrase.</li>
<li>The search engine will look for an exact match for what you put in a box, so spelling matters.</li>
<li>Search terms generally have to be at least 3 characters long, but a few common search terms such as C# and += that have length 2 are allowed.</li>
<li>Search terms should generally be in the singular, not the plural, but plurals of a few very common search terms are accepted.</li>
<li>The search is not case-sensitive.</li>
</ul>
<form method="post" action="/cgi-bin/uncgi/search205" onsubmit="return validate(this)" onreset="cleanup()">
<p>
<input type="text" class="searchbox" autocomplete="off" placeholder="Keyword or phrase" id="Key1" name="Key1" size="56" maxlength="56" onkeyup="suggest(this.value)" />
</p>
<div id="suggestions"></div>
<p>
<input type="submit" class="button" value="Search" />
<input type="reset" class="button" value="Clear" />
</p>
</form>
<small>Search engine written by Julian Whalen, Josh Vasko, and
<a class="footer" href="/carlsond/index.html">Br. David Carlson</A>
</small>