Search drop-down box solution_html/css_WEB-ITnose-HTML Tutorial-php.cn

Table of Contents

回复讨论(解决方案)

Home

Web Front-end

HTML Tutorial

Search drop-down box solution_html/css_WEB-ITnose

Jun 24, 2016 pm 12:08 PM

&lt;head&gt;    &lt;title&gt;无标题页&lt;/title&gt;    &lt;style type=&quot;text/css&quot;&gt;    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}    body,input,button,select,textarea{font-size:14px;font-family:Tahoma,Geneva,Verdana;outline:none;}    body{margin:0;padding:0; font-size:12px; background-color:#f3f3f3}    .clear{clear:both;}    a{text-decoration:none;}    a:hover{text-decoration:none ;}    img{border:0}    ol,ul{list-style:none;}    div{ margin:0}  /*搜索区*/.search_background{ height:21px; width:150px; background-color:#ffffff; float:left;border:0; color:#cacacc;margin:5px 0 0 5px;display:inline}.search_background .input_text{ float:left}.search_background .input_text input{ width:124px; height:20px; font-size:12px; line-height:20px;padding:0 3px 0 3px;  border:0;}.search_background .search_button{ float:right;  display:inline}.search_background .search_button a{ margin:3px 3px 0 0 }  /*搜索下拉*/.search_ifo{width:149px;border: 1px solid #999;  background-color:#fff;margin-top:30px;margin-left:-150px;float:left}.search_public{background:url(../images/short_dotted_line.png) repeat-x; height:25px;line-height:25px; text-indent:1em;}.search_public:hover{background-color:#e1e1e1;cursor:pointer;}.search_tip{height:30px;line-height:30px;color:#0098E1}.search_tip:hover{background-color:#e1e1e1;cursor:pointer;}      &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;   &lt;div class=&quot;search_background&quot;&gt;                   	&lt;div class=&quot;input_text&quot;&gt;&lt;input type=&quot;text&quot; /&gt;&lt;/div&gt;            	&lt;div class=&quot;search_button&quot;&gt;&lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;images/individual-headerandfooter/search.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;        	&lt;/div&gt;&lt;div class=&quot;search_ifo&quot;&gt;&lt;div style=&quot;border-bottom: 1px solid #ccc;&quot;&gt;    &lt;div class=&quot;search_tip&quot;&gt;&amp;nbsp;搜“&lt;span style=&quot;color:Red;&quot;&gt;白&lt;/span&gt;”相关信息&raquo;&lt;/div&gt;    &lt;div  class=&quot;search_public&quot; &gt;&lt;span style=&quot;color:Red;&quot;&gt;白&lt;/span&gt;啊&lt;/div&gt;     &lt;div  class=&quot;search_public&quot;&gt;&lt;span style=&quot;color:Red;&quot;&gt;白&lt;/span&gt;啊&lt;/div&gt;    &lt;/div&gt;         &lt;/div&gt;         &lt;/div&gt;&lt;/body&gt;

Copy after login

就是想在输入框输入字符后，下拉框显示相应的信息，比如说输入白下拉框显示搜白相关信息、再在下面显示相关白的信息列表

回复讨论(解决方案)

这是有个插件的，我前段时间还帮别人搞了个，只是里面有些修改的，是别人做的。

例子：http://s.dingso.com/ds.jsp?q1=设计玩具&q2=&q3_1=&q3_2=&q3_3=&q4=&Sortt=2&Periodd=3&startat=0

google　一个这个：autocomplete　就知道了

就是发ajax返回结果集后操作页面显示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body,div {
font-family:verdana;
line-height:100%;
font-size:9pt;
}
input {
width:300px;
}
h1 {
text-align:center;
font-size:2.2em;
}
#divf {
margin:10px;
font-size:0.8em;
text-align:center;
}
#divc {
border:1px solid #333333;
}
.des {
width:500px;
background-color:lightyellow;
border:1px solid #333;
padding:20px;
margin-top:20px;
}
.mouseover {
color:#ffffff;
background-color:highlight;
width:100%;
cursor:default;
}
.mouseout {
color:#000000;
width:100%;
background-color:#ffffff;
cursor:default;
}
</style>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>

<BODY>
<div id="divc">

</div>
<h1>Autocomplete Function</h1>
<div align="center">
<input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto">
</div>
<div id="divf">
Power By Miracle, never-online
</div>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

谢谢大家了，希望有人可以根据我提供的信息编写一段，麻烦了！

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn