The next page of code I made a simple similar to the Baidu homepage search events.
The main event is to enter a keyword on the text box, and a div below will show you the data for your fuzzy keyword.
and click on the data below, the data will jump directly into the text box.
There is also a small event where the mouse changes color.
If you are interested, you can take a look.
<script src="Jquery-1.11.2.min.js"></script><style type="Text/css">*{margin:0px; auto; padding:0px;} #xianshi {margin-top:30px; width:300px; margin-left:500px;} #txt {width:300px;} #list {width:300px; height:100px; position:absolute;} #name {width:295px; height:30px;}. sj{width:300px; border:1px Solid # the; background-color: #FFF;}. Sj:hover{cursor:pointer} #fg {margin-top:50px;}</style><body>//make a div to lock the style<div id="Xianshi">//make a div, set a text box with input keywords<div id="txt">//Make a text box and set the ID to name.<input type="text"Id="name"/> </div>make a div that stores the search information after entering the keyword<div id="List"></DIV></DIV><HR id="FG"/><table border="1"Width="100%"cellpadding="0"cellpadding="0"Id="TD"></table></body>//start writing JQ effects<script type="Text/javascript">$ (document). Ready (function (e) {//add an input event to the text box with ID name$("#name"). KeyUp (function () {Xianshi (); //take out the value in the text box and receive it with key varKey = $ ( This). Val (); //Input Ajax$.ajax ({Async:false, URL:"xianshichuli.php", Data:{key:key,bs:0}, type:"POST", DataType:"TEXT", Success:function (data) {if(Data.trim () = ="") { } Else { //splits an incoming array into a string varShuju = Data.trim (). Split ("|"); varstr =""; //Loop This array for(vari =0; i<shuju.length;i++) {Shuju[i]; STR= str+"<div class = ' SJ ' >"+shuju[i]+"</div>"//put the looped string into the div . } $("#list"). html (str);//put the values you have taken out into the list Div. $("#list"). CSS ("Display","Block") } } }); $(". SJ"). MouseOver (function () {//Add a SJ mouse to put on the event $("#sj"). CSS ("Background-color"," White"); $( This). CSS ("Background-color","#FC0");//mouse over to change background color }) $(". SJ"). Mouseout (function () {$ ( This). CSS ("Background-color"," White");//Mouse out returns the original font color }) $(". SJ"). Click (function () {//Join a SJ Click event varText = $ ( This). text ();//take out the value in SJ and receive it in text. $("#name"). val (text);//put the extracted value in the Name text box. $("#list"). CSS ("Display","None")}) Xianshi (); })}); function Xianshi () {varKey = $ ("#name"). Val (); $.ajax ({URL:"xianshichuli.php", Data:{key:key,bs:1}, type:"POST", DataType:"TEXT", Success:function (data) {varHang = Data.trim (). Split ("|") varstr ="<tr><td> car name </td><td> model </td><td> release time </td><td> fuel consumption </td ><td> Car Price </td></tr>"; for(varI=0; i) { varLie = Hang[i].split ("^"); STR= str +"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[7]+"</td></tr>"; } $("#td"). html (str); } }) }</script>
Create an event code similar to Baidu search
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
