Este artigo descreve o método do JS+CSS para implementar a caixa de pesquisa do Sina Weibo. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS+CSS imita o efeito semelhante à caixa de pesquisa de Sina Weibo </ititle>
<style type = "text/css">
* {preenchimento: 0; margem: 0;}
corpo {tamanho da fonte: 14px; }
#Box {Width: 600px; Margem: 40px automático;}
#in {width: 240px; Altura: 24px; altura da linha: 24px; Fronteira: 1px-Radio de borda sólido: 4px; Shadow da caixa: inserção 0 0 2px; }
#Suggest {exibição: Nenhum; Posição: relativa; margin-top: -1px; Largura: 240px; Top-top: 1px; Border: 1px Top de borda sólida: 0 Nenhum;
Radio de fronteira: 4px; Shadow da caixa: inserção 0 0 2px; estouro: oculto; }
#suggest A {Display: Block; Cor:#f00; Altura: 24px; altura da linha: 24px; Decoração de texto: Nenhum; preenchimento: 0 4px;}
#suggest a: hover {background: #eee;}
#Sugestre A Span {Color#369;}
</style>
<script type = "text/javascript">
window.onload = function () {
// declarar um monte de variáveis para uso abaixo
var obox = document.getElementById ("caixa");
obj = document.getElementById ("in");
osug = document.getElementById ("sugestão");
oa = osug.getElementsByTagName ("span");
// Compatível com os navegadores IE e Firefox, mas após o teste, verificou -se que o IE678 pode ser IE9, mas não pode ser acionado quando excluído. Eu verifiquei on -line e disse que há um problema com o IE9.
obj.onInput = obj.onPropertyChange = Onchange;
função onchange () {
var txt = this.value;
var words = txt.length;
if (palavras == 0) {
Osug.style.display = "nenhum";
} else if (palavras <= 8) {
osug.style.display = "bloco";
for (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .innerhtml = txt;
}
} else if (palavras> 8) {
osug.style.display = "bloco";
var limite = txt.substring (0,8)+"...";
for (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .innerHtml = limite;
}
}
}
}
function disbox () {
document.getElementById ("sugest"). style.display = "nenhum";
}
</script>
</head>
<Body>
<dl id = "caixa">
<dt> <input onBlur = "Disbox ()" type = "text" name = "" id = "em" /> </dt>
<dd id = "sugest">
<a href = "###"> pesquisa por "<pan> </span>" weibo relacionado </a>
<a href = "###"> pesquise "<span> </span>" usuários relacionados </a>
</dd>
</dl>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.