php+ajax做仿百度搜索下拉自动提示框(有实例)
发布时间:2020-12-15 23:35:18 所属栏目:百科 来源:网络整理
导读:php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 IMG style="WIDTH: 446px; HEIGHT: 123px" alt=php+mysql+ajax实现百度搜索下拉提示框 src="https://files.jb51.cc/file_images/article/201208/201208211942222.jpg"gt;
php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 <IMG style="WIDTH: 446px; HEIGHT: 123px" alt=php+mysql+ajax实现百度搜索下拉提示框 src="https://files.52php.cn/file_images/article/201208/201208211942222.jpg"> 效果图 <IMG style="WIDTH: 381px; HEIGHT: 316px" alt=php+mysql+ajax实现百度搜索下拉提示框 src="https://files.52php.cn/file_images/article/201208/201208211942223.jpg"> <div class="codetitle"><a style="CURSOR: pointer" data="63799" class="copybut" id="copybut63799" onclick="doCopy('code63799')"> 代码如下:<div class="codebody" id="code63799"> <?php mysql_connect('localhost','root',''); mysql_select_db("test"); $queryString = $_POST['queryString']; if(strlen($queryString) >0) { $sql= "SELECT value FROM countries WHERE value LIKE '".$queryString."%' LIMIT 10"; $query = mysql_query($sql); while ($result = mysql_fetch_array($query,MYSQL_BOTH)){ $value=$result['value']; echo '<li onClick="fill(''.$value.'');">'.$value.''; } } ?> index.htm文件 <div class="codetitle"><a style="CURSOR: pointer" data="55513" class="copybut" id="copybut55513" onclick="doCopy('code55513')"> 代码如下:<div class="codebody" id="code55513"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <script type="text/javascript" src="http://www.iiwnet.com/templets/niu/js/jquery.min.js"> <script type="text/javascript"> function lookup(inputString) { if(inputString.length == 0) { // Hide the suggestion box. $('#suggestions').hide(); } else { $.post("rpc.php",{queryString: ""+inputString+""},function(data){ if(data.length >0) { $('#suggestions').show(); $('#autoSuggestionsList').html(data); } }); } } // lookup function fill(thisValue) { $('#inputString').val(thisValue); setTimeout("$('#suggestions').hide();",200); } <style type="text/css"> body { font-family: Helvetica; font-size: 11px; color: #000; } h3 { margin: 0px; padding: 0px; } .suggestionsBox { position: relative; left: 30px; margin: 10px 0px 0px 0px; width: 200px; background-color: #212427; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 2px solid #000; color: #fff; } .suggestionList { margin: 0px; padding: 0px; } .suggestionList li { margin: 0px 0px 3px 0px; padding: 3px; cursor: pointer; } .suggestionList li:hover { background-color: #659CD8; } |