jqueryphp百度搜索框智能提示效果.doc

jqueryphp百度搜索框智能提示效果剖析

jquery php 百度搜索框智能提示效果 \ 代码如下 index.html文件,保保存成index.htm 代码如下 复制代码 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleAjax Auto Suggest/title script type=text/网页特效 src=jquery-1.2.1.pack.js/script 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); } /script 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; } /style /head body div form div Type your county: br / input type=text size=30 value= id=inputString onkeyup=lookup(this.value); onblur=fill(); / /div div class=suggestionsBox id=suggestions style=display: none; img src=upArrow.png style=position: relative; top: -12px; left: 30px; alt=upArrow / div class=suggestionList id=autoSuggestionsList nbsp; /div /div /form /div /body /html php文件 代码如下 复制代码 ?php mysql教程_connect(localhost, root ,root); mysql_select_db(autoComplete); $queryString = $_POST[queryString]; if(strlen($queryString) 0) { $

文档评论(0)

1亿VIP精品文档

相关文档